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​

 

开始优化前

优化后