为什么应用CDN
Vue我的项目打包的时候，默认会把所有代码合并生产新文件,其中包含各种库导致打包进去很大。如果应用cdn的话,会更利于程序的加载速度。
在Vue我的项目中，引入到工程中的所有js、css文件，编译时都会被打包进vendor.js，浏览器在加载该文件之后能力开始显示首屏。若是引入的库泛滥，那么vendor.js文件体积将会相当的大，影响首开的体验。
解决办法
将援用的内部js、css文件剥离开来，不编译到vendor.js中，而是用资源的模式援用，这样浏览器能够应用多个线程异步将vendor.js、内部的js等加载下来，达到减速首开的目标。
内部的库文件，能够应用CDN资源，或者别的服务器资源等。
应用CDN次要解决两个问题
- 打包工夫太长、打包后代码体积太大，申请慢
- 服务器网络不稳带宽不高，应用cdn能够回避服务器带宽问题
具体步骤
上面，以引入vue、vuex、vue-router为例，阐明解决流程。
资源引入
-
在我的项目根目录index.html应用cdn节点导入
<body> <div id="app"></div> <!-- built files will be auto injected --> <!--开发环境--> <script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script> <!--生产环境--> <!--<script src="https://cdn.bootcss.com/vue/2.6.11/vue.min.js"></script>--> <!-- 引入组件库 --> <script src="https://cdn.bootcss.com/vue-router/3.2.0/vue-router.min.js"></script> <script src="https://cdn.bootcss.com/axios/0.23.0/axios.min.js"></script> <script src="https://cdn.bootcss.com/element-ui/2.15.6/index.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.1/moment.min.js"></script> </body> - 在vue.config.js中退出externals内部扩大
configureWebpack: {
externals: {
"vue": "Vue",
"vue-router": "VueRouter",
"axios": "axios",
"moment": "moment",
"element-ui": "ELEMENT",
}
},这里解释一下externals 配置选项的作用：
咱们想援用一个库，然而又不想让webpack打包，并且又不影响咱们在程序中以CMD、AMD或者window/global全局等形式进行应用，那就能够通过配置externals。
踩坑配置留神点：element-ui要大写为ELEMENT
-
去掉原有的援用
如果不删除原先的import，我的项目还是会从node_modules中引入资源。\
也就是说不删的话，npm run build时候仍会将援用的资源一起打包，生成文件会大不少。所以我认为还是删了好打包比照
引入
node_modules中模块：能够看到element和moment占比大
CDN引入模块：
可能看到vendor.js文件大大减少，打包速度也快了不少
问题集
vue-cli 4应用report剖析vendor.js
Vue Cli（@/vue/cli）自带的webpack包体积优化工具，它能够查看各个模块的size大小，不便优化。只须要在build前面加上 –report 参数即可。
-
咱们把命令配置到package.json里
"scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "report": "vue-cli-service build --report" //退出该行 },执行npm run report 打包并生成report。\
留神：网上很多说要先装置webpack-bundle-analyzer包，其实不须要装置。 - 运行 npm run report 后，会在 build 的同时，在dist目录会生成一个report.html，关上后可看到各文件占用大小
发表回复