Webpack性能优化

• 优化构建速度
• 优化产出体积

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'

3. 多进程打包1（加快打包速度）

• JS/Nod