代码敲完，项目上线，然后就要与优化相遇。
项目时间非常的长加载慢的很，至此开始前端优化之旅
项目根目录运行
npm install webpack-bundle-analyzer --save-dev在build/webpack.dev.conf.js中引入
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; module.exports = { devServer: { configureWebpack: { plugins: [ new BundleAnalyzerPlugin()//分析打包文件（大小占比），解开注释打包后自动启动 ] }, } } 运行后显示可以看到几个大的js 下面是已经优化过后的截图
1.在vue.config.js引用需要使用cdn资源的库，再判断环境生产环境则启用cnd
const envBoole = process.env.NODE_ENV === 'development' ? false : true; const cdn = { // 忽略打包的第三方库 externals: { 'vue': 'Vue', 'vue-router': 'VueRouter', 'vuex': 'Vuex', 'element-ui': 'ELEMENT', 'axios': 'axios' } } module.exports = { configureWebpack: { //打包忽略第三方库 externals:envBoole ? cdn.externals : {}, } chainWebpack: config => { config.plugin('html').tap(args => { args[0].cdn = envBoole //判断生产环境启用cdn return args }) } } 2.在piblic文件夹下的index.html中使用cnd，判断生产环境则启用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" /> <title>测试</title> <script src="http://g.alicdn.com/dingding/dinglogin/0.0.5/ddLogin.js"></script> <link rel="icon" type="image/x-icon" href="logo.png" /> <!-- 使用 CDN 的 css 文件 --> <% if (htmlWebpackPlugin.options.cdn) { %> <link href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" rel="stylesheet" > <% } %> </head> <body style="overflow: auto !important;"> <noscript> <strong>We're sorry but slot doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> </noscript> <div id="app"></div> <!-- 使用 CDN 的 JS 文件 --> <% if (htmlWebpackPlugin.options.cdn) { %> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/vue-router/3.5.2/vue-router.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/vuex/3.6.2/vuex.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script> <script src="https://unpkg.com/element-ui/lib/index.js"></script> <% } %> </body> </html>原文链接：https://blog.csdn.net/MYuanFang/article/details/121327436?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522165918321816781818738233%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=165918321816781818738233&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~times_rank-26-121327436-null-null.nonecase&utm_term=cdn
原创文章，作者：优速盾-小U，如若转载，请注明出处：https://www.cdnb.net/bbs/archives/298
