vue cli3 打包优化cdn

vue.configs

const cdn = { css: [ 'https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.6/theme-chalk/index.min.css' ], js: [ 'https://unpkg.com/vue@2.6.14/dist/vue.js', 'https://cdn.bootcdn.net/ajax/libs/vue-router/3.5.3/vue-router.min.js', 'https://cdn.bootcss.com/axios/0.18.1/axios.min.js', 'https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.6/index.min.js' ] } module.exports = { lintOnSave: false, runtimeCompiler: true, devServer: { proxy: 'http://test.com' }, chainWebpack: config => { // 生产环境配置 if (isProduction) { // 删除预加载 config.plugins.delete('preload'); config.plugins.delete('prefetch'); // 压缩代码 config.optimization.minimize(true); // 分割代码 config.optimization.splitChunks({ chunks: 'all' }) // 生产环境注入cdn config.plugin('html') .tap(args => { args[0].cdn = cdn; return args; }); } }, configureWebpack: config => { if (isProduction) { // 用cdn方式引入 config.externals = { 'vue': 'Vue', 'vue-router': 'VueRouter', 'axios': 'axios', 'element-ui': 'ELEMENT', } } }, // 生产环境是否生成 sourceMap 文件 productionSourceMap: false, // css相关配置 css: { // 是否使用css分离插件 ExtractTextPlugin extract: true, // 开启 CSS source maps? sourceMap: false, // 启用 CSS modules for all css / pre-processor files. modules: false, }, // use thread-loader for babel & TS in production build // enabled by default if the machine has more than 1 cores parallel: require('os').cpus().length > 1 } 

public index.html

<html lang="zh-cn"> <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>高企申报系统</title> <!-- 使用CDN的CSS文件 --> <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.css) { %> <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="preload" as="style"> <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="stylesheet"> <% } %> </head> <body> <script src="http://api.map.baidu.com/api?v=3.0&ak=j0qtT8GeFwofzHD3dKeaci7lDkpKlXUq&callback=bMapInit"></script> <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.3&key=d4332e5adb8b584442266763d20b978c"></script> <div id="app"></div> <!-- built files will be auto injected --> <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %> <script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script> <% } %> </body> </html> 

原文链接:https://blog.csdn.net/weixin_49601466/article/details/124321941?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522171836857716800186536213%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=171836857716800186536213&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~times_rank-2-124321941-null-null.nonecase&utm_term=cdn%E7%B3%BB%E7%BB%9F

原创文章,作者:优速盾-小U,如若转载,请注明出处:https://www.cdnb.net/bbs/archives/33362

(0)
优速盾-小U的头像优速盾-小U
上一篇 2025年10月2日 07:53
下一篇 2025年10月2日 19:44

相关推荐

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

优速盾注册领取大礼包www.cdnb.net
/sitemap.xml