项目上线如何打包优化?

打包发布

1.使用 yarn build指令生成一个dist文件

package.json

2.解决项目启动白板

参考文档: cli.vuejs.org/zh/config/#…

打包之后，会得到dist目录，如果希望可以打开index.html，则需要提前在vue.config.js中配置

3.生成打包报告

• 通过yarn preview --report
• 通过vue ui指令生成图形化工具

4.路由懒加载

• 路由懒加载：只有在路由进入这个页面时，才去加载这个组件对应的资源

  语法 : () = > import {}

  参考文档: router.vuejs.org/zh/guide/ad…

• 路由懒加载中的魔法注释

  语法 : 通过在注释中指定webpackChunkName，可以人为设置这个文件的名字

  作用 : 对打包文件进行分类

5.去除console.log

1.下包 yarn add babel-plugin-transform-remove-console

2.然后在babel.config.js文件中配置

6.webpack配置排除打包-引用网络资源

注意，在开发项目时，文件资源还是可以从本地node_modules中取出，而只有项目上线了，才需要去使用外部资源。此时我们可以使用环境变量来进行区分。具体如下：

• 在**vue.config.js**文件中配置

• webpack配置externals配置项
• 注入CDN配置到html模板

• 找到 public/index.html 通过配置CDN Config 依次注入 css 和 js

综合以上实现基本项目打包