webpack生产环境几项配置
webpack生产环境几项配置
1.关闭console
只需修改webpack的配置文件即可关闭生产环境console1
2
3
4
5
6
7
8
9//build/webpack.prod.env.js
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false,
drop_console: true,//默认关闭所有console
pure_funcs: ['console.log']//配置需关闭的console 如果不配置默认关闭全部 如果配置则只关闭已经配置的
},
sourceMap: false
})
相关连接:
https://jeffjade.com/2017/08/06/124-webpack-packge-optimization-for-volume/
webapck配置
2.启用webpack-externals
在index.html
里添加cdn
文件链接1
2
3
4
5
6
7<!-- index.html -->
<script src="https://unpkg.com/vue"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
1 | // build/webpack.prod.conf.js增加externals即可 |
3.webpack生成hash值长度控制
1 | // build/webpack.prod.conf.js |
4.开启gzip(默认小于1k不开启)
1 | //安装必须的插件 |
修改相关位置1
2
3
4
5
6
7
8
9
10
11--- a/config/index.js
+++ b/config/index.js
@@ -17,7 +17,7 @@ module.exports = {
// Surge or Netlify already gzip all static assets for you.
// Before setting to `true`, make sure to:
// npm install --save-dev compression-webpack-plugin
- productionGzip: true,
+ productionGzip: false,
productionGzipExtensions: ['js', 'css'],
// Run the build command with an extra argument to
// View the bundle analyzer report after build finishes:
5.生产环境关闭sourcemap
默认生产环境的sourcemap是打开的1
2
3
4
5
6
7
8
9
10
11--- a/build/webpack.prod.conf.js
+++ b/build/webpack.prod.conf.js
@@ -36,7 +36,7 @@ const webpackConfig = merge(baseWebpackConfig, {
warnings: false,
drop_console: true
},
- sourceMap: false
+ sourceMap: true
}),
// extract css into its own file
new ExtractTextPlugin({