- 优化构建速度
- 优化产出体积
WDS Webpack DevServer
HMR Hot Module Replacement
Live Reloading 自动刷新
vue:HMR
性能优化主要是对开发环境而言的,因为生产一般只构建一次
文件内容不变,计算的hash值就不变,可以利用浏览器缓存加快速度
1. 优化babel-loader
- 适用于开发/生产环境
{
test: /\.js$/,
use: {
loader: 'babel-loader',
options: {
// 对编译的文件缓存
cacheDirectory: true,
}
},
// 不编译node_modules
exclude: path.resolve(__dirname, 'node_modules')
// 或者include src下的代码
},
2. 优化第三方库如moment
- 适用于开发/生产环境
index.js中引入了moment.js(但只需要引入中文的语言),给打包后的index.js造成了不必要的体积负担
① IgnorePlugin
- 不引入相应代码,最终打包生成的自然也没有
const webpack = require('webpack')
plugins:[
// 忽略moment库的文件夹./locale 不引入任何语言包,若需要使用则手动引入
new webpack.IgnorePlugin(/\.\/locale/,/moment/)
]
② noParse
- 不做打包,最终打包生成的有这部分代码
- 减少打包的时间,但没有减小体积
module.exports = {
// 不做打包的配置
noParse: [/vue\.min\.js$/]
}
- index.js
// 手动引入中文语言包
import 'moment/locale/zh-cn'