主要说明两点：
- 如何减少webpack打包的时间
- 如何让webpack打出来的包更小
对于loader和plugin的区别
- loader 用于加载某些资源，比如对js，css文件进行一些响应的校验
- plugin 用于扩展webpack的功能，直接作用于webpack.
如何减少webpack打包的时间
对于loader, 影响打包的就是babel, 引文babel会将字符串转换成AST，然后对AST进行转换最后在生成新的代码，项目越大，效率也就越低。
- 优化搜索范围
module.exports = {
module: {
rules: [
{
// js 文件才使用 babel
test: /\.js$/,
loader: 'babel-loader',
// 只在 src 文件夹下查找
include: [resolve('src')],
// 不会去查找的路径
exclude: /node_modules/
}
]
}
}
node_modules都是编译码，所以没必要再次编译
- 增加缓存
loader: 'babel-loader?cacheDirectory=true' - 受限于node是单线程的，所以可以引入插件 happyPack 开启多线程，这样可以很大程度提升打包效率
module: {
loaders: [
{
test: /\.js$/,
include: [resolve('src')],
exclude: /node_modules/,
// id 后面的内容对应下面
loader: 'happypack/loader?id=happybabel'
}
]
},
plugins: [
new HappyPack({
id: 'happybabel',
loaders: ['babel-loader?cacheDirectory'],
// 开启 4 个线程
threads: 4
})
]
- 增加映射 resolve.alias：可以通过别名的方式来映射一个路径，能让 Webpack 更快找到路径
- module.noParse: 让webpack不扫描没有依赖的文件, 例如jq
module:{
noParse:/jquery/,//不去解析jquery中的依赖库
}
如何让webpack打出来的包更小
对于SPA项目，项目存在十几个或更多的路由，如果都将打包到一个js文件，虽然请求合并了，但是页加载了很多不需要的代码。
- 按需加载，加载对应的文件时候，返回一个Promise,当Promise成功以后去执行回调
vue 路由懒加载 - 该成多页面应用，单入口配置成多入口
- Scope Hoisting 分析模块之间的依赖，尽可能的把打包的模块合并到一个函数中去
optimization: {
concatenateModules: true
}
}
- Tree Shaking 可以实现删除项目中未被引用的代码
webapck 4 中生产环境中自动开启
