Vue项目四种打包优化的方法总结

目录

项目优化策略：

1.使用CDN

2.使用路由懒加载

3.服务端压缩文件

4.移除代码中的console

---

 默认情况下，通过import语法导入的第三方依赖包，最终会全部打包到一个js文件中，会导致单文件体积过大大，在网速底下时会阻塞网页加载，影响用户体验。

项目优化策略：

1.使用CDN

    使用CDN，减少包的体积。 将线上环境中用到的一些依赖，使用CDN网络节点的方式进行引用，而不是直接打包到包里。
    项目开发阶段和生产阶段不一样，我们在开发阶段还是要使用import导入依赖的方式来进行开发，在生产阶段再配置CDN外链来获取项目依赖。

     默认情况下，Vue项目的开发模式和发布模式，共同使用一个打包的入口文件（src/main.js）为了将项目的开发过程与发布过程分离，我们可以分别使用两个入口文件，一个用于开发环境打包(这个就是main.js)，一个用于生产环境打包

1.1  在项目根目录下新建 vue.config.js 文件

1.2  配置prod_env.js  （发布模式打包入口文件）

    凡是通过CDN节点方式引用的包，在这里都注释掉并在public/index.html 中加入如下引用  如果注释掉出现错误可以不进行注释

1.3 在 vue.config.js 中添加配置 （把用到的js脚本放到 externals中）