前端性能优化之《webpack提升构建速度》
使用CommonsChunkPlugin
多入口情况下，使用CommonsChunkPlugin来提取公共代码
module.exports = {
plugins: [
new CommonsChunkPlugin({
name: 'vender', // 公共代码的chunk命名为 'verder'
filename: '[name].bundle.js' // 生成的文件名为 vender.bundle.js
})
]
};
使用externals
通过externals配置来提取常用库
module.exports={
configureWebpack:{
externals: {
'element-ui': 'ELEMENT',
'vue': 'Vue',
'vue-router': 'VueRouter',
}
}
}
使用Happypack
使用Happypack 实现多线程加速编译
const HappyPack = require('happypack');
module.exports = {
...
module: {
rules: [
test: /\.js$/,
// use: ['babel-loader?cacheDirectory'] 之前是使用这种方式直接使用 loader
// 现在用下面的方式替换成 happypack/loader，并使用 id 指定创建的 HappyPack 插件
use: ['happypack/loader?id=babel'],
// 排除 node_modules 目录下的文件
exclude: /node_modules/
]
},
plugins: [
...,
new HappyPack({
/*
* 必须配置
*/
// id 标识符，要和 rules 中指定的 id 对应起来
id: 'babel',
// 需要使用的 loader，用法和 rules 中 Loader 配置一样
// 可以直接是字符串，也可以是对象形式
loaders: ['babel-loader?cacheDirectory']
})
]
}
使用webpack-uglify-parallel
使用webpack-uglify-parallel来提升uglifyPlugin的压缩速度。
原理上webpack-uglify-parallel采用了多核并行压缩来提升压缩速度
//npm i webpack-parallel-uglify-plugin
module.exports = {
new ParallelUglifyPlugin({
cacheDir: ".cache/",
uglifyJS: {
output: {
comments: false
},
warnings: false,
compress: {
drop_debugger: true,
drop_console: true
}
}
})
}
JS代码压缩
terser是一个JavaScript的解释、绞肉机、压缩机的工具集，可以帮助我们压缩、丑化我们的代码，让bundle更小。在production模式下，webpack
默认就是使用 TerserPlugin 来处理我们的代码的。如果想要自定义配置它，配置方法如下：
const TerserPlugin = require('terser-webpack-plugin')
module.exports = {
...
optimization: {
minimize: true,
minimizer: [
new TerserPlugin({
parallel: true // 电脑cpu核数-1
})
]
}
}
CSS代码压缩
CSS压缩通常是去除无用的空格等，因为很难去修改选择器、属性的名称、值等。CSS的压缩我们可以使用另外一个插件：css-minimizer-webpack-plugin。
// npm install css-minimizer-webpack-plugin -D
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
module.exports = {
// ...
optimization: {
minimize: true,
minimizer: [
new CssMinimizerPlugin({
parallel: true
})
]
}
}
HTML文件压缩
使用HtmlWebpackPlugin插件来生成HTML的模板时候，通过配置属性minify进行html优化。
module.exports = {
...
plugin:[
new HtmlwebpackPlugin({
...
minify:{
minifyCSS:false, // 是否压缩css
collapseWhitespace:false, // 是否折叠空格
removeComments:true // 是否移除注释
}
})
]
}
文件大小压缩
对文件的大小进行压缩，减少http传输过程中宽带的损耗。
// npm install compression-webpack-plugin -D
new ComepressionPlugin({
test:/\.(css|js)$/, // 哪些文件需要压缩
threshold:500, // 设置文件多大开始压缩
minRatio:0.7, // 至少压缩的比例
algorithm:"gzip", // 采用的压缩算法
})
图片压缩
一般来说在打包之后，一些图片文件的大小是远远要比 js 或者 css 文件要来的大，所以图片压缩较为重要。
module: {
rules: [
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name]_[hash].[ext]',
outputPath: 'images/',
}
},
{
loader: 'image-webpack-loader',
options: {
// 压缩 jpeg 的配置
mozjpeg: {
progressive: true,
quality: 65
},
// 使用 imagemin**-optipng 压缩 png，enable: false 为关闭
optipng: {
enabled: false,
},
// 使用 imagemin-pngquant 压缩 png
pngquant: {
quality: '65-90',
speed: 4
},
// 压缩 gif 的配置
gifsicle: {
interlaced: false,
},
// 开启 webp，会把 jpg 和 png 图片压缩为 webp 格式
webp: {
quality: 75
}
}
}
]
},
]
}
Tree Shaking
使用Tree-shaking和Scope Hoisting来剔除多余代码
useExports(通过标记某些函数是否被使用，之后通过Terser来进行优化)
usedExports只需要将usedExports设为true；使用之后，没被用上的代码在webpack打包中会加入unused
harmony export mul注释，用来告知 Terser 在优化时，可以删除掉这段代码
module.exports = {
...
optimization:{
usedExports:true;
}
}
sideEffects(跳过整个模块/文件)，直接查看该文件是否有副作用
sideEffects配置方法在package.json中设置sideEffects属性，如果sideEffects设置为false，就是告知webpack可以安全的删除未用到的exports。如果有些文件需要保留，可以设置为数组的形式。
"sideEffecis":[
"./src/util/format.js",
"*.css" // 所有的css文件
]
代码分离
将代码分离到不同的bundle中，之后可以按需加载，或者并行加载这些文件。默认情况下，所有的JS代码在首页全部加载，会影响到首页的加载速度。代码可以分出更小的bundle，以及控制资源加载的优先级，提供代码的加载性能。通过插件splitChunksPlugin来实现。
module.exports = {
...
optimization:{
splitChunks:{
chunks:"all"
}
}
}
内联chunk
可以通过InlineChunkHtmlPlugin插件将一些chunk的模块内嵌到html
const InlineChunkHtmlPlugin = require('react-dev-utils/InlineChunkHtmlPlugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
...
plugin:[
new InlineChunkHtmlPlugin(HtmlWebpackPlugin,[/runtime.+\.js/]
}
优化loader配置
在使用loader时，可以通过配置include、exclude、test属性来匹配文件，接触include、exclude规定哪些匹配应用loader
如采用 ES6 的项目为例，在配置 babel-loader时，可以这样：
module.exports = {
module: {
rules: [
{
// 如果项目源码中只有 js 文件就不要写成 /\.jsx?$/，提升正则表达式性能
test: /\.js$/,
// babel-loader 支持缓存转换出的结果，通过 cacheDirectory 选项开启
use: ['babel-loader?cacheDirectory'],
// 只对项目根目录下的 src 目录中的文件采用 babel-loader
include: path.resolve(__dirname, 'src'),
},
]
},
};
使用 resolve.extensions
在开发中我们会有各种各样的模块依赖，这些模块可能来自于自己编写的代码，也可能来自第三方库， resolve可以帮助webpack从每个
require/import 语句中，找到需要引入到合适的模块代码通过resolve.extensions是解析到文件时自动添加拓展名，默认情况如下：
module.exports = {
...
extensions:[".warm",".mjs",".js",".json"]
}
当我们引入文件的时候，若没有文件后缀名，则会根据数组内的值依次查找
当我们配置的时候，则不要随便把所有后缀都写在里面，这会调用多次文件的查找，这样就会减慢打包速度
优化 resolve.modules
resolve.modules 用于配置 webpack
去哪些目录下寻找第三方模块。默认值为[‘node_modules’]，所以默认会从node_modules中查找文件
当安装的第三方模块都放在项目根目录下的 ./node_modules目录下时，所以可以指明存放第三方模块的绝对路径，以减少寻找，配置如下：
module.exports = {
resolve: {
// 使用绝对路径指明第三方模块存放的位置，以减少搜索步骤
// 其中 __dirname 表示当前工作目录，也就是项目根目录
modules: [path.resolve(__dirname, 'node_modules')]
},
};
优化 resolve.alias
alias给一些常用的路径起一个别名，特别当我们的项目目录结构比较深的时候，一个文件的路径可能是./…/…/的形式
通过配置alias以减少查找过程
module.exports = {
...
resolve:{
alias:{
"@":path.resolve(__dirname,'./src')
}
}
}
使用 DLLPlugin 插件
利用DllPlugin和DllReferencePlugin预编译资源模块
通过DllPlugin来对那些我们引用但是绝对不会修改的npm包来进行预编译，再通过DllReferencePlugin将预编译的模块加载进来。
使用步骤分成两部分：
- 打包一个 DLL 库
- 引入 DLL 库
打包一个 DLL 库
webpack内置了一个DllPlugin可以帮助我们打包一个DLL的库文件
module.exports = {
...
plugins:[
new webpack.DllPlugin({
name:'dll_[name]',
path:path.resolve(__dirname,"./dll/[name].mainfest.json")
})
]
}
引入 DLL 库
使用 webpack 自带的 DllReferencePlugin 插件对 mainfest.json
映射文件进行分析，获取要使用的DLL库，然后再通过AddAssetHtmlPlugin插件，将我们打包的DLL库引入到Html模块中
module.exports = {
...
new webpack.DllReferencePlugin({
context:path.resolve(__dirname,"./dll/dll_react.js"),
mainfest:path.resolve(__dirname,"./dll/react.mainfest.json")
}),
new AddAssetHtmlPlugin({
outputPath:"./auto",
filepath:path.resolve(__dirname,"./dll/dll_react.js")
})
}
使用 cache-loader
在一些性能开销较大的 loader之前添加 cache-loader，以将结果缓存到磁盘里，显著提升二次构建速度
保存和读取这些缓存文件会有一些时间开销，所以请只对性能开销较大的 loader 使用此loader
module.exports = {
module: {
rules: [
{
test: /\.ext$/,
use: ['cache-loader', ...loaders],
include: path.resolve('src'),
},
],
},
};
terser 启动多线程
使用多进程并行运行来提高构建速度
module.exports = {
optimization: {
minimizer: [
new TerserPlugin({
parallel: true,
}),
],
},
};