前端性能优化二十五：花裤衩模板vue打包优化

(1). 优化vue.js:

①. 修改vue.config.js:const isProd = process.env.NODE_ENV === 'production'const getProdExternals = () => {return {'vue': 'Vue',// 'vue-router': 'VueRouter',// 'vuex': 'Vuex'}}module.exports = {...configureWebpack: {...externals: isProd ? getProdExternals() : {}}}②. 在public/index.html文件中引入vue cdn路径:<script src="//cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>a. 不写协议前缀,会与网站的协议相同.所以,可以不写https.②. 'vue': 'Vue'说明:a. key是node模块名称,value是项目中对模块的引用b. 前面的vue是代码中import A from B中的Bc. 后面的Vue是引入的cdn暴露的变量:(1). 可以在console控制台打印window,会发现window.Vue(2). 这个Vue就是需要的变量名称

(2). 优化index.html写法:

vue.config.js:

const cdn = {css: [],js: [// 与package.json里面的版本对应'//cdn.bootcss.com/vue/2.6.10/vue.min.js','//cdn.bootcss.com/vue-router/3.0.6/vue-router.min.js','//cdn.bootcss.com/vuex/3.1.0/vuex.min.js']
}
module.exports = {chainWebpack(config) {...config.plugins.delete('prefetch')// 加载配置config.plugin('html').tap(args => {if (process.env.NODE_ENV === 'production') {args[0].cdn = cdn}return args})...}
}

index.html:

<!-- 使用CDN的CSS文件 -->
<% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.css) { %>
<link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="external nofollow" rel="external nofollow" rel="preload" as="style">
<link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="external nofollow" rel="external nofollow" rel="stylesheet">
<% } %>
<!-- 使用CDN的JS文件 -->
<% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %><!-- <link href="<%= htmlWebpackPlugin.options.cdn.js[i] %>" rel="external nofollow" rel="preload" as="script"> --><script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
<% } %>