文章目录

1. 1. webpack生产环境几项配置
   1. 1.1. 1.关闭console
   2. 1.2. 2.启用webpack-externals
   3. 1.3. 3.webpack生成hash值长度控制
   4. 1.4. 4.开启gzip（默认小于1k不开启）
   5. 1.5. 5.生产环境关闭sourcemap

webpack生产环境几项配置

1.关闭console

只需修改webpack的配置文件即可关闭生产环境console

//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文件链接

<!-- 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>  

// build/webpack.prod.conf.js增加externals即可
// 注意：想elementui和vue-router不能再使用use，否则依然会打包
module.exports = {
  entry: {
    app: './src/main.js'
  },
  externals: {
    //key 是 require 的包名，value 是全局的变量。
    'vue': 'Vue',
    'vue-router': 'VueRouter',
    'element-ui': 'element-ui'
  }

3.webpack生成hash值长度控制

 // build/webpack.prod.conf.js
 //只需将
utils.assetsPath('js/[name].[chunkhash].js')
//修改为即可 
utils.assetsPath('js/[name].[chunkhash:8].js')

4.开启gzip（默认小于1k不开启）

//安装必须的插件
npm install --save-dev compression-webpack-plugin

修改相关位置

--- 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是打开的

--- 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({