20180829 更新

今天反复试了，不用区分 测试环境还是 生产环境，统一都用 cdn 就可以了

背景

之前自己搭建了一个 vue + tp5.1 的后台项目（https://segmentfault.com/a/11...），坑很多，其中一个就是资源加载的方案，由于是后台项目，之前一直没放在心上，看到一些资源优化方案后（https://juejin.im/post/5a2910...），觉得有必要弄一下。

老版本


通过：npm run build 后

\"在这里插入图片描述\"

可以看到， 文件大小最大的 820kb，即使用 Gzipped 压缩后也是 219kb，随着项目不断变大，这个值还会不断增大

使用CDN加速

这里请先参考 https://juejin.im/post/5a2910...，这里只做vue-cli@3.0的配置修改

  • index.html文件

<!DOCTYPE html>
<html>
<head>
    <  charset=\"utf-8\">
    <  http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">
    <  name=\"viewport\" content=\"width=device-width,initial-scale=1.0\">
    <  rel=\"icon\" href=\"<%=  _URL %>favicon.ico\">
    < >VUE后台管理系统</ >
    <  rel=\"stylesheet\" href=\"https://unpkg.com/element-ui/lib/theme-chalk/index.css\">
</head>
<body>
<div id=\"app\"></div>
<!-- built files will be auto injected -->
<  src=\"https://unpkg.com/vue@2.5.16/dist/vue.runtime.min.js\"></ >
<  src=\"https://unpkg.com/vuex@3.0.1/dist/vuex.min.js\"></ >
<  src=\"https://unpkg.com/vue-router@3.0.1/dist/vue-router.min.js\"></ >
<  src=\"https://unpkg.com/element-ui/lib/index.js\"></ >

</body>

</html>
  • vue.config.js 文件

module.exports = {
     Url: process.env.NODE_ENV === \"production\" ? \"./\" : \"/\",
    outputDir: process.env.outputDir,
    configureWebpack: {
        externals: {
            vue: \"Vue\",
            vuex: \"Vuex\",
            \"vue-router\": \"VueRouter\",
            \"element-ui\": \"ELEMENT\"
        }
    }
};

页面优化后

\"在这里插入图片描述\"

来源：https://segmentfault.com/a/1190000016178566

继续阅读与本文标签相同的文章

无标签
最新文章 最热文章
收藏 打印

特别推荐 2026年05月18日 星期一

精彩发现

热门标签

阻止表单提交 窗口 关闭浏览器 清除 CDATA css文件 光标位置 坐标 javascrpt !important 超链接 数字

相关文章