1.开发环境优化
1.1 resolve.modules
告诉webpack在那个文件夹下面去找第三方模块，避免了层层的查找
resolve:{
modules:[path.resolve(__dirname,'node_modules')]
}
1.2 resolve.alias
对一些第三方比较打的库，指定其文件夹位置，避免了层层的查找
resolve:{
alias:{
'vue':patch.resolve(__dirname, './node_modules/vue/dist/vue.min.js'),
'react':patch.resolve(__dirname, './node_modules/react/dist/react.min.js')
}
}
1.3 配置loader时，通过test、exclude、include缩小搜索范围
1.4 开启happypack多线程解析
我一般在解析js文件的时候会使用
module:{
rules:[
{
test: /(\.js|\.jsx)$/,
exclude: resolve(__dirname, 'node_modules'),
use: ['happypack/loader?id=babel'],
},
]
},
plugins:[
new happypack({
id:"babel",
loaders:[
{loader:'babel-loader?cacheDirectory=true'}
]
})
]
1.5 开启paralleUgilifyPlugin多线程压缩js文件
new ParallelUglifyPlugin({
uglifyJS: {
output: {
//去除空格
beautify: false,
//去除注释
comments: false
},
compress: {
//删除所有的console
drop_console: false
}
}
}),
1.6 开启热模块替换HMR
模块热替换不刷新整个网页而只重新编译发生变化的模块，并用新模块替换老模块
/**
* 启用webpack内置的webpack插件(开启HMR)
*/
new webpack.HotModuleReplacementPlugin(),
devServer:{
hot:true
}
2.生产环境优化
2.1 单独提取css代码MiniCssExtractPlugin
{
test:/\.css$/,
use:[MiniCssExtractPlugin.loader,css-loader]
}
new MiniCssExtractPlugin({
filename:'css/[name].[hash:10].css'
})
2.2压缩css OptimizeCssAssetsWebpackPlugin
new OptimizeCssAssetsWebpackPlugin()
2.3 代码分割 optimization
optimization: {
splitChunks: {
chunks: 'all',
minSize: 30000, //块的最小大小,只有超过30k,才会进行代码分割
maxSize: 0,
minChunks: 1, //模块至少需要被引用1次
maxAsyncRequests: 5, //最大打包数量
maxInitialRequests: 3, //entry入口最大数量
automaticNameDelimiter: '~',
name: true,
cacheGroups: {
vendors: {
test: /[\\/]node_modules[\\/]/,
priority: -10,
reuseExistingChunk: true
},
default: {
minChunks: 2,
priority: -20,
reuseExistingChunk: true
}
}
},
runtimeChunk: {
name: entrypoint => `manifest.${entrypoint.name}`
}
}
2.4 按需加载
import(/*webpackChunkName:"one*/'./one.js').then(data=>{
console.log(data);
})
2.5 CDN引入第三方包
<body>
<div id="app"></div>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</body>
externals:{
jquery:"jQuery",//告诉webpack哪些第三方包不参与打包，优化首屏加载速度
}
2.6 source-map
我的用法：
devtool: process.env.NODE_ENV == 'development' ? 'eval-source-map' : 'cheap-module-source-map',
2.7 Tree Shaking剔除无用代码
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用？
- 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了？
- 找不到素材资源介绍文章里的示例图片？
- 模板不会安装或需要功能定制以及二次开发？
发表评论
还没有评论，快来抢沙发吧！