构建速度
- 更新npm版本
- 优化打包速度 babel-loader
{
test: /\.js$/,
use: ['babel-loader?cacheDirectory'],
include: srcPath,
exclude: /node_modules/
}
new webpack.IgnorePlugin(/\.\/locale/, /moment/),
import 'moment/locale/zh-cn'
module.export = {
module:{
noParse: [/react\.min\.js$/]
}
}
{
test: /\.js$/,
use: ['happypack/loader?id=babel'],
include: srcPath,
},
new HappyPack({
id: 'babel',
loaders: ['babel-loader?cacheDirectory']
}),
在使用happypack插件的时候,会碰到this.getOptions is not a funtion的问题,网上搜的大部分是less-loader,sass-loader的版本过高,但是我并没有安装这两个
解决办法:降低style-loader,css-loader版本
happypack插件不能与MiniCssExtractPlugin公用,也会出现上述问题,降低版本无效,暂时搁置?
const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const HardSourceWebpackPlugin = require('hard-source-webpack-plugin');
new ParallelUglifyPlugin({
uglifyJS: {
output: {
beautify: false,
comments: false,
},
compress: {
drop_console: true,
collapse_vars: true,
reduce_vars: true,
}
}
})
创建一个webpack.dll.js文件,打包一些第三方库的代码,用到Dllwebpackplugin
在webpack.config.js文件要用到addAssetsHtmlPlugin和DllreferencePlugin
watch: true,
watchOptions: {
ignored: /node_modules/,
aggregateTimeout: 300,
poll: 1000
}
new HotModuleReplacementPlugin()
devServer: {
hot:true
}
if (module.hot) {
module.hot.accept(['./math'], () => {
const sumRes = sum(10, 30)
console.log('sumRes in hot', sumRes)
})
}
产出代码优化
- 体积更小
- 合理分包,提出重复逻辑
- 速度更快,内存使用小
- 小图片base64编码 url-loader
- bundle打包出的路径加hash
- 懒加载
- 提取公共代码
- IgnorePlugin
- CDN加速
- 使用production
条件:必须要ES Module下才能生效,commonjs不行
mode: production
ES Module和Commonjs的区别
1.ES Module 静态引入,编译时引入,所以import只能在最上面引入
2.Commonjs 动态引用,执行时引入
只有静态引用的规范,才能实现Tree-Shaking
new ModuleConcatenationPlugin()