优化babel-loader(缓存)
思想是开启缓存：cacheDirectory
{
test: /\.m?js$/,
exclude: /(node_modules)/,
use: {
loader: "babel-loader",
options: {
cacheDirectory: true
},
},
},
noParse（忽略）
忽略对部分未模块化的递归解析和处理，文件不能包含import、require、define等模块化语句
module.exports = {
module: {
noParse: /jquery|xxjs/
}
}
多进程
happyPack
多进程打包
thread-loader
多进程打包（推荐）
ParallelUglifyPlugin
多进程压缩js
webpack提供了UglifyJS插件来压缩js，但是单线程的
module.exports = {
plugins: [
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
compress: {
warnings: false
}
}),
]
}
忽视
动态链接库文件
由webpack内置：地址
DllPlugin 拆分
webpack.dll.config.js文件
module.exports = {=
entry: {
// 第三方库
react: ['react', 'react-dom', 'react-redux']
},
output: {
// 输出的动态链接库的文件名称，[name] 代表当前动态链接库的名称，
filename: '[name].dll.js',
path: resolve('dist/dll'),
// library必须和后面dllplugin中的name一致 后面会说明
library: '[name]_dll_[hash]'
},
plugins: [
// 接入 DllPlugin
new webpack.DllPlugin({
// 动态链接库的全局变量名称，需要和 output.library 中保持一致
// 该字段的值也就是输出的 manifest.json 文件 中 name 字段的值
name: '[name]_dll_[hash]',
// 描述动态链接库的 manifest.json 文件输出时的文件名称
path: path.join(__dirname, 'dist/dll', '[name].manifest.json')
}),
]
}
DllReferencePlugin 使用
new webpack.DllReferencePlugin({
context: __dirname,
manifest: require('./dist/dll/react.manifest.json')
})
引入
<body>
<div id="app"></div>
<!--引用dll文件-->
<script src="../../dist/dll/react.dll.js" ></script>
</body>
