责编 | 屠敏
出品 | CSDN 博客
序言
相信现在很多人都是用Vue做过了各种项目，但是项目代码做完和上线并不代表这结束，还有上线往后的优化也是很主要的一点，这次的博客就来给大家说一下如何优化一下Vue的项目，让你的项目打包和运行速率更上一个台阶。
优化策略
天生打包报告
修正webpack默认配置
加载外部CDN资源
路由
开启gizp配置
天生打包报告
天生Vue的打包报告目的在于让我们先大概的理解到当前项目天生的各个文件的大小，让我们心里有数，知道哪里须要优化。
通过命令行参数形式天生报告：
//通过 vue-cli的命令选项可以天生打包报告// --report 选项可以天生 report.html 用以剖析包内容vue-cli-service build --report
通过可视化面板直接查看报告：
可以在UI面板中，通过掌握台和剖析面板，可以方便的查看项目中所存在的问题。
上边图片中标注的便是我们须要把稳的，依赖项很多，导致打的包终极体积非常的大，相信这项目如果上线那么前端会先要求这个无比巨大的js文件，估计甲方爸爸会锤去世前端职员。
通过 vue.config.js修正webpack的默认配置
通过vue-cli 3,0 工具天生的项目，默认隐蔽了所有的 webpack配置项，目的是为了屏幕项目的配置过程，让程序员的事情重心放到详细的功能和逻辑的实现上。
如果程序员有修正 webpack默认配置的需求，可以在项目根目录中 按需创建vue.config.js这个配置文件，从而对项目的打包发布过程做自定义配置，详细可以参考 https://cli.vuejs.org/zh/config/#vue-config-js
为开拓模式和发布模式指定不同的打包入口：
默认情形下，Vue项目的开拓模式和发布模式公用一个入口文件(src/main.js)，为了将项目的开拓过程与发布过程分离，我们可以设置两种模式，各自指定打包入口文件。
开拓模式入口文件：src/main-dev.js
发布模式入口文件：src/main-prod.js
通过chainWebpack自定义打包入口：
module.exports = {lintOnSave: false,chainWebpack:config=>{//生产环境config.when(process.env.NODE_ENV === 'production',config=>{//把稳main-prod.js是已经存在的文件config.entry('app').clear.add('./src/main-prod.js')})//开拓环境config.when(process.env.NODE_ENV === 'development',config=>{//把稳main-dev.js是已经存在的文件config.entry('app').clear.add('./src/main-dev.js')})}}
由于开拓生产环境不同，以是在main.js文件中内容就可能不同，为理解决耦合，我们就把main.js 重新划分成了两个文件 分别是main-dev.js 和 main-prod.js
通过externals加载外部CDN资源:
默认情形下，通过import语法导入的第三方依赖包，终极会打包合并到同一个文件中，从而导致打包成功后，单文件体积过大的问题。
vue.config.js的配置externals节点：
module.exports = {lintOnSave: false,chainWebpack:config=>{//生产环境config.when(process.env.NODE_ENV === 'production',config=>{config.entry('app').clear.add('./src/main-prod.js')config.set('externals',{vue:'Vue','vue-router':'VueRouter',axios:'axios',lodash:'_',echarts:'echarts',nprogress:'NProgress','vue-quill-editor':'VueQuillEditor'})})//开拓环境config.when(process.env.NODE_ENV === 'development',config=>{config.entry('app').clear.add('./src/main-dev.js')})}}
通过设置externals这个节点，指定哪些包直接去window上去查找利用，而不会将这些指定的包再次打包起来，这样就可以减小最终生成的js的文件体积。
去除main.js中引入的第三方包的样式表：
将这些样式表也统统的从main.js文件中去除，统一由CDN进行引入。
在public/index.html中添加 css和js的CDN地址：
<!DOCTYPE html><html lang=\公众en\公众><head><meta charset=\公众utf-8\"大众><meta http-equiv=\"大众X-UA-Compatible\"大众 content=\公众IE=edge\"大众><meta name=\"大众viewport\公众 content=\"大众width=device-width,initial-scale=1.0\公众><link rel=\公众icon\"大众 href=\"大众<%= BASE_URL %>favicon.ico\公众><title><%= htmlWebpackPlugin.options.title %></title><!-- nprogress 的样式表文件 --><link rel=\"大众stylesheet\公众 href=\公众https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.css\"大众 /><!-- 富文本编辑器 的样式表文件 --><link rel=\"大众stylesheet\公众 href=\"大众https://cdn.staticfile.org/quill/1.3.4/quill.core.min.css\"大众 /><link rel=\"大众stylesheet\"大众 href=\公众https://cdn.staticfile.org/quill/1.3.4/quill.snow.min.css\公众 /><link rel=\公众stylesheet\"大众 href=\"大众https://cdn.staticfile.org/quill/1.3.4/quill.bubble.min.css\公众 /><script src=\"大众https://cdn.staticfile.org/vue/2.6.11/vue.min.js\公众></script><script src=\"大众https://cdn.staticfile.org/vue-router/3.1.6/vue-router.min.js\"大众></script><script src=\公众https://cdn.staticfile.org/axios/0.19.2/axios.min.js\"大众></script><script src=\公众https://cdn.staticfile.org/lodash.js/4.17.15/lodash.min.js\"大众></script><script src=\"大众https://cdn.staticfile.org/echarts/4.7.0/echarts.min.js\"大众></script><script src=\"大众https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.js\"大众></script><!-- 富文本编辑器的 js 文件 --><script src=\"大众https://cdn.staticfile.org/quill/1.3.4/quill.min.js\公众></script><script src=\公众https://cdn.jsdelivr.net/npm/vue-quill-editor@3.0.6/dist/vue-quill-editor.js\公众></script></head><body><noscript><strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=\"大众app\公众></div><!-- built files will be auto injected --></body></html>
我们通过CDN去引用css样式的话，我们项目天生的包中就不会存在这些css文件，可以减小项目的体积，并且，我们还将 指定的js文件也通过CDN的办法来引用，这样这些js就会注册到windows全局中，这样就对应到了vue.config.js配置externals节点的内容了。
引入CDN效果比拟：
未利用CDN：
利用CDN后：
甲方爸爸打人的力度轻了许多。
路由
当项目打包构建的时候，js包会变得非常巨大，影响页面加载，如果我们能够把不同路由对应的组件分割身分歧的代码块，然后当路由被访问的时候才加载对应的组件，这样就更加高效了。
安装@bable/plugin-syntax-dynamic-import包
在babel.config.js配置文件中声明该插件
将路由改为按需加载的形式：
const Login = => import(/ webpackChunkName: \"大众login_home_welcome\公众 / '../components/Login.vue')const Home = => import(/ webpackChunkName: \公众login_home_welcome\"大众 / '../components/Home.vue')const Welcome = => import(/ webpackChunkName: \"大众login_home_welcome\公众 / '../components/Welcome.vue')
个中webpackChunkName 指定了 打包的文件名字，让 Login.vue 、Home.vue 、 Welcome.vue 统一打到 指定的包中。
开启gizp配置：
这一项该当由后端小哥来做，利用gizp可以减少文件体积，使得传输速率更快，我们就拿Express来展示一下如何去做。
//安装相应的包npm install compression -D//导入包const compression = require('compression')//启用中间件app.use(compression)
这样我们要求包的体积就会变得更小，有助于提升我们项目运行的速率。
终极效果展示
终极在我们经由上述一系列的操作往后，我们最终生产环境打出来的包体积只有356.2KB，这样我们项目在上线往后，就可以减轻首页假去世的问题，同时由于要求的文件小了很多，以是运行速率也会加快，大家赶紧去优化一下自己的项目吧。
版权声明：本文为CSDN博主「靖凡无所畏惧」的原创文章，遵照CC 4.0 BY-SA版权协议。原文：https://blog.csdn.net/wjf1997/article/details/106248699
