VUE打包优化

最新推荐文章于 2025-09-07 20:29:08 发布

转载最新推荐文章于 2025-09-07 20:29:08 发布 · 81 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5b3a0c0b518825749e4a2ca4

文章标签：

#webpack #json #javascript #ViewUI

经过2小时努力，将打包后的vendor由1.44M优化至50k。方法是打包 vender 时不打包 vue、element-ui、echarts 等，换用国内的 bootcdn 直接引入到根目录的 index.html 中。

首先在根目录引入CDN

注意要在 </body> 前引入，否则会报错。

/* ./index.html */
<body>
    <div id="app"></div>
    <!-- built files will be auto injected -->   
    <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
    <script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
    <script src="https://cdn.bootcss.com/element-ui/2.3.3/index.js"></script>
    <script src="https://cdn.bootcss.com/echarts/4.0.4/echarts.min.js"></script>
</body> 
复制代码

接着配置 webpack

在 webpack 里有个 externals，可以忽略不需要打包的库。key 参考 package.json , value 是你引入的别名。

/* ./build/webpack.base.conf.js */

externals: {
    'vue': 'Vue',
    'vue-router': 'VueRouter',
    'element-ui': 'ElementUI',
    'echarts': 'Echarts',
}
复制代码

到这里应该就 OK 了但是我遇到了报错

element is not defined
复制代码

main.js 中注释掉就好了

// import ElementUI from 'element-ui'
复制代码

对比图片，优化前：

优化后：

2018-4-17 补充

今天想 vue 和 vue-router 文件不是很大，还是一起打包的好，能少两次请求，于是： index.html :

<!-- <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script> -->
<!-- <script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script> -->
<script src="https://cdn.bootcss.com/element-ui/2.3.3/index.js"></script>
<script src="https://cdn.bootcss.com/echarts/4.0.4/echarts.min.js"></script>
复制代码

webpack.base.conf.js :

externals: {
    // 'vue': 'Vue',
    // 'vue-router': 'VueRouter',
    'element-ui': 'ElementUI',
    'echarts': 'Echarts',
}
复制代码

结果报错：

element is not defined
复制代码

原因是 element 依赖 vue ，需要在 vue 之后引入，而如果在其之后引入，又会报组件未注册的错误，因此 vue 和 element 必须同时使用CDN，而且 element 需在 vue 之后引入。

参考地址