【vue】vue项目打包优化

①三方库改cdn引入

	使用cdn引用， 打包后js文件小很多。之前1M多的文件变成了300多K。

1、index.html 文件中引入

<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>

2、修改配置
路径： build/ webpak.base.conf.js
在module.exports 中的external中暴露出去。

在其他使用import 引用的地方就可以去掉了。

②去除不必要代码：

去除注释、console等。
vue cli 3.0中, 在vue.config.js中配置

configureWebpack:{
     
    optimization: {
     
      minimizer: [
        new UglifyJsPlugin({
     
          uglifyOptions: {
     
            // 删除注释
            output:{
     
              comments:false
            },
            // 删除console debugger 删除警告
            compress: {
     
              warnings: false,
              drop_console: true,//console
              drop_debugger: false,
              pure_funcs: ['console.log']//移除console
            }
          }
      })
    ]
    }
  }

③GZip压缩（nginx修改配置）

1、更改配置： productionGzip: true

2、安装插件

npm install --save-dev compression-webpack-plugin

3、配置

这时候npm run build， 打包后的文件.gz后缀：

※进行Gzip压缩的时候遇到一个问题：

• 直接运行npm install --save-dev compression-webpack-plugin后进行build，报错。
• 查了查，有同学说是版本问题，改为1.11.1版本，再进行build=》成功。

4、nginx修改配置
conf/nginx.conf

gzip  on;
gzip_types text/plain application/x-javascript application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;

修改配置后记得重启服务器： nginx -s reload