最全 webpak4.0 打包性能优化清单
最全 webpak4.0 打包性能优化清单
webpack4.0如何进行打包优化？
无非是从两个角度进行优化，其一：优化打包速度，其二：优化打包体积，送你一份打包性能优化清单
1.使用loader的时候尽量指定exclude和inlucde来提高文件查找效率，避免不必要的查找，设置noParse参数
module: {
noParse: /jquery/, // 不去解析jquery中的依赖
rules:[
{
test: /\.js?$/,
use: [
{ loader: 'babel-loader' },
{
// 自定义的同步处理loader
loader: 'replaceLoader',
options: {
name: 'hellonew'
}
},
{
// 自定义的异步处理loader
loader: 'asyncReplaceLoader',
options: {
name: 'myloader'
}
}
],
exclude: ['/node_modules'],
include: [path.resolve(__dirname, '../src/asset/less/component/js')]
}
]
},
2.对css公共的模块进行分离
const CssMiniExtreactPlugin = require('mini-css-extract-plugin')
// postcss自动给css3加上前缀
module{
rules:[
{
test: /\.less?$/,
// loader的执行顺序，从下到上，从右到左
use: [
{
loader: CssMiniExtreactPlugin.loader,
options: {
publicPath: '../'
}
},
{
// css-loader
loader: 'css-loader',
options: {
importLoaders: 2 // import引入的less文件也执行less-loader
// modules: true
// minimize: true
}
},
'postcss-loader',
'less-loader'
]
}
]
}
plugins:[
new CssMiniExtreactPlugin({
filename: 'css/[name]_[contenthash].css',
chunkFilename: 'css/[name]_chunk_[contenthash].css'
}),
],
optimization: {
//拆分css，公共的使用过两次的chunk打包到common.css方便做缓存,单独的css每个页面打包一个针对当前的页面的css
splitChunks: {
name: true,
cacheGroups: {
// 打包公共的css
styles: {
name: 'common',
test: /\.less$/,
chunks: 'all',
enforce: true,
minChunks: 2
},
// 打包每个页面的css
fooStyles: {
name: 'index',
test: (m, c, entry = 'index') => m.constructor.name === 'CssModule' && recursiveIssuer(m) === entry,
chunks: 'all',
enforce: true
},
barStyles: {
name: 'detail',
test: (m, c, entry = 'detail') => m.constructor.name === 'CssModule' && recursiveIssuer(m) === entry,
chunks: 'all',
enforce: true
},
}
}
}
}
3.拆分js，将公共的js拆分方便把相同的内容缓存下来
// 配置splitChunks
optimization: {
splitChunks: {
name: true,
cacheGroups: {
vendors: {
chunks: 'async',
name: 'verdon',
test: /[\\/]node_modules[\\/]/,
priority: -20,
minSize: 0
// filename: '[name].js'
},
default: {
chunks: 'all',
name: 'common',
minChunks: 1,
test: /[\\/]node_modules[\\/]/, // 配置打包哪里的文件
priority: -10
// reuseExistingChunk: true
}
}
}
}
4.开启css，js和html压缩
//压缩css
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')
plugins:[
new OptimizeCssAssetsWebpackPlugin()
]
//压缩js
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
optimization: {
minimizer: [
new UglifyJsPlugin({
cache: true,
parallel: true, // 并发压缩
sourceMap: true // 开启sourcemap
})
]
}
//压缩html
const HtmlWebpackPlugin = require('html-webpack-plugin')
plugins:[
new HtmlWebpackPlugin({
hash: true,
template: `./src/index.html`,
filename: `index.html`,
minify: {
collapseWhitespace: true //开启html压缩
}
})
]
5.使用tree shake把没有用到的js和css剔除掉
optimization: {
usedExports: true, // 使用tree shake
}
//需要在package.json里面设置“sideEffect”进行配合使用
"sideEffects": [
"*.css", //移出css
"@babel/polyfill" //移除掉@babel/polyfill
],
6.善用alias，resolve里面有一个alias的配置项目，能够让开发者指定一些模块的引用路径。
// 省略后缀
resolve: {
extensions: ['.js', '.vue', '.jsx', '.json'],
// 定义别名
alias: {
'@component': utils.resolve('../src/component')
}
},
7.使用prefetch预加载
// 异步加载
function dom() {
return import(/* webpackPrefetch:true */ 'lodash').then(({ default: _ }) => {
let div = $('<div>')
div.html(_.join(['webpack', 'is', 'so', 'easy'], '***'))
return div
})
}
8.使用懒加载
//配置babel
npm install @babel/plugin-syntax-dynamic-import -D
//.babelrc文件配置如下
{
"plugins": ["@babel/plugin-syntax-dynamic-import"]
}
//在项目中正常使用即可
const Foo = () => import('./Foo.vue')
9.使用DllPlugin使得第三方模块只打包分析一次
//生成一个webpack.dll.config.js文件，执行npm run dll
const utils = require('./utils')
const webpack = require('webpack')
module.exports = {
mode: 'production',
entry: {
jquery: ['jquery'],
lodash: ['lodash']
},
output: {
path: utils.resolve('../dll'),
filename: '[name].dll.js',
library: '[name]' // 将打包的dll文件暴露一个公共的变量
},
plugins: [
// 输出映射关系
new webpack.DllPlugin({
name: '[name]',
path: utils.resolve('../dll/[name].manifest.json')
})
]
}
//以下为webpack配置
new AddAssetWebpackPlugin({
filepath: utils.resolve('../dll/jquery.dll.js')
}),
new AddAssetWebpackPlugin({
filepath: utils.resolve('../dll/lodash.dll.js')
}),
new webpack.DllReferencePlugin({
manifest: utils.resolve('../dll/jquery.manifest.json')
}),
new webpack.DllReferencePlugin({
manifest: utils.resolve('../dll/lodash.manifest.json')
})
10.使用happyPack进行多线程打包，提升打包效率
//npm install happypack -D
const Happypack = require('happypack') // 多线程打包，提高打包速度
let os = require('os')
let happyThreadPool = Happypack.ThreadPool({ size: os.cpus().length })
//webpack.config.js配置
rules:[
{
test:/\.less?$/
use:['happypack/loader?id=css']
}
{
test: /\.js?$/,
use: ['Happypack/loader?id=js'],
}
]
plugins:[
new Happypack({
id:'css',
use:['style-loader','css-loader','less-loader'],
threadPool: happyThreadPool
}),
new Happypack({
id: 'js',
use: [
{ loader: 'babel-loader' },
{
loader: 'replaceLoader',
options: {
name: 'hellonew'
}
},
{
loader: 'asyncReplaceLoader',
options: {
name: 'wxl'
}
}
],
threadPool: happyThreadPool
})
]
11.对图片打包，适当采用base64位格式，如css sprite图片可以使用base64位格式
rules:[
{
test: /\.(jpg|png|svg|gif)?$/,
use: {
// loader: 'file-loader',
loader: 'url-loader', // url-loader把图片打包成base64格式了
options: {
// placeholder
name: '[name]_[hash].[ext]',
outputPath: 'images/', // 将图片打包到指定的文件夹下
limit: 204800 // 小于限定尺寸图片就被打包到images目录下
}
}
}
]
12.合理使用devtool参数，开发环境不建议使用cheap-module-source-map
devtool: 'cheap-module-source-map',
13.使用image-webpack-loader压缩图片，适当设置压缩程度，以免造成图片失真
$ npm install image-webpack-loader --save-dev
{
loader: 'image-webpack-loader',
options: {
mozjpeg: {
progressive: true,
quality: 65
},
optipng: {
enabled: true
},
pngquant: {
quality: [0.65, 0.90],
speed: 4
},
gifsicle: {
interlaced: false
},
webp: {
quality: 75
}
}
}
