vue打包生成环境优化

优化方法：

1. 路由懒加载     src/router.js

         改成import引入

 

2.按需引入  

echarts、loadash、element等，具体查看相关官方文档

3.vue.config.js设置生成环境

关闭sourceMap，设置productionSourceMap为false即可

去掉css的sourceMap

productionSourceMap为false

 

4.cdn引入需要完整引入的包，需要在CDN不可用时用本地js

    配置externals，实现使用CDN时仍然可以在业务代码中使用import的方式引入

     

 

      CDN引入。需要验证CDN是否成功，失败则使用本地的包    public/index.html

     ​

 

     只在生产环境使用CDN或min包（CDN不可用时），开发环境仍然使用npm包

    配置htmlWebpackPlugin，添加环境变量

     

 

    判断是否是生产环境

    
 

DllPlugin，减少打包时间（待完成）

Gzip，nginx中启用服务器端gzip或者本地打包启用gzip配合服务器的gzip_static     nginx/default.conf

 

 

结果验证：

使用vue-cli-service build --report  命令

可以在dist目录下生成一个report.html文件，运行即可查看各个包在最终的发布代码中的大小。

// package.json中添加script,使用npm run report​

 

开始优化前

优化后