生产环境性能优化
一、优化打包构建速度
1.1、oneOf（上一章已讲解）
1.2、babel缓存（上一章已讲解）
1.3、多进程打包
下载 cnpm i thread-loader -D给babel-loader用
在webpack.config.js中配置
{
test: /\.js$/,
exclude: /node_modules/,
use: [
// 开启多进程打包，进程开启大概600毫秒，进程通信也有开销
// 所有只有工作消耗时间较长时，才需要进行进程打包
// 'thread-loader',
{
loader: 'thread-loader',
options:{
worker: 2 // 进程2个
}
},
{
loader: 'babel-loader',
options: {
presets: [
[
'@babel/preset-env', // 基本兼容
{
// 按需加载
useBuiltIns: 'usage',
corejs: {
version: 3
},
// 指定兼容性做到哪个版本的浏览器
targets: {
chrome: '60',
firefox: '60',
ie: '9',
safari: '10',
edge: '17'
}
}
]
],
// 开启babel缓存，第二次构建时，会读取之前的缓存
cacheDirectory: true
}
}
],
//
},二、优化代码运行的性能
2.1、文件资源缓存（hash-chunkhash-cotenthash）（上一章已讲解）
2.2、tree-shaking（上一章已讲解）
2.3、code split代码分割（上一章已讲解）
2.4、懒加载和预加载
首先是懒加载，就是在未触发时有些js文件可不加载，当我们触发时再加载。
预加载可以在浏览器空闲后再偷偷加载
在html中写一个button按钮，在入口js文件中绑定dom
document.getElementById('btn').onclick = function () {
// 懒加载
// 预加载 prefetch
// 正常加载是多个文件并行加载，预加载可以在浏览器空闲后再偷偷加载，但是兼容性不好
import(/* webpackChunkName: 'test', webpackPrefetch: true*/'./test')
.then((add) => {
// 文件加载成功
// eslint-disable-next-line
console.log(add(2, 5));
});
}2.5、PWA渐进式网络开发应用程序
作用：和app一样，网页离线也能访问
步骤：
安装workbox：cnpm i workbox-webpack-plugin -D
在webpack.config.js中配置const workboxWebpackPlugin = require('workbox-webpack-plugin');
new workboxWebpackPlugin.GenerateSW({
// 1.帮助serviceworker快速启动
// 2. 删除旧的servcieworker
// 生成一个serviceworker配置文件
clientsClaim:true,
skipWaiting: true
})在入口js文件中注册serviceWorker
// 注册serviceWorker
// 处理兼容性问题
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('/service-worker.js')
.then(() => {
// eslint-disable-next-line
console.log('sw注册成功');
})
.catch(() => {
// eslint-disable-next-line
console.log('注册失败');
});
});
}- eslint不认识window，navigator全局变量，解决，在package.js中修改eslintConfig配置
"env": {
"browser": true // 支持浏览器端全局变量
}
2.sw代码必须运行在服务器上
cnpm i serve -g
serve -s build 启动服务器，将build目录下所有资源作为静态资源暴露出去
2.6、externals
忽略不想打的包，比如jquery我们只想cdn引入
webpack.config.js添加
externals: {
// 忽略库名 --npm包名
jquery: 'jQuery'
}记得在htm引入jquery
2.7、dll动态链接库
可以一次将第三方库打包，后面不许重复打包
新建webpack.dll.js文件
/**
* 使用dll技术，对某些库（第三方库，jquery，react，vue）进行但单独打包
* 运行webpack时，默认查找的是webpack.config.js文件，所以
* 需要运行webpack.dll.js文件，
* 所以修改命令--> webpack --config webpack.dll.js
*/
const {resolve} = require('path');
const webpack = require('webpack');
module.exports = {
entry: {
// 最终打包生成的[name] --> jquery
// ['jquery'] --> 要打包的库是jquery
jquery: ['jquery']
},
output: {
filename: '[name].js',
path: resolve(__dirname, 'dll'),
library: '[name]_[hash]' // 打包的库里面向外暴露出去的内容叫什么名字
},
plugins: [
// 打包生成一个manifest.json文件，提供一个jquery映射
new webpack.DllPlugin({
name: '[name]_[hash]', // 映射库的暴露的内容名称
path: resolve(__dirname, 'dll/manifest.json') // 输出文件路径
})
],
mode: 'production'
};运行命令webpack --config webpack.dll.js
生成了dll文件夹
修改webpack.config.jsconst webpack = require('webpack');
// 告诉webpack哪些库不参与打包，同时使用时的名称也得变
new webpack.DllReferencePlugin({
manifest: resolve(__dirname, 'dll/manifest.json')
}),在入口js文件中引入，jquery，打包后此时不会将jquery打包进built.js文件
若想要引入jquery
安装cnpm i add-asset-html-webpack-plugin -D修改webpack.config.jsconst AddAssetHtmlWebpackPlugin = require('add-asset-html-webpack-plugin');
// 将某个文件打包出去，并在html中自动引入该资源
new AddAssetHtmlWebpackPlugin({
filepath: resolve(__dirname, 'dll/jquery.js')
})
