vue之打包优化

百里狂生

已于 2022-07-15 15:04:45 修改

阅读量723

点赞数

分类专栏： vue 文章标签： vue axios iview webpack

于 2018-10-17 23:55:29 首次发布

本文链接：https://blog.csdn.net/Li_dengke/article/details/83119836

版权

vue 专栏收录该内容

14 篇文章 1 订阅

订阅专栏

最近写项目，4个平台的项目由一个代码库管理，超过50个.vue文件，导致代码量过大，每次构建打包速度都很慢，

下面是针对vue打包构建优化的一些测试结果：

第一次npm run dev :

第一次npm run build构建:

优化修改如下：

1，采用cdn加载UI库，把不常改变的库放到index.html中，通过cdn引入

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>vue-iview-axios-router-laydate</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/iview@3.1.3/dist/styles/iview.css">
</head>

<body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue-router@3.0.1/dist/vue-router.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/iview@3.1.3/dist/iview.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios@0.18.0/dist/axios.min.js"></script>
</body>

</html>

2，修改build/webpack.base.conf.js文件，在 module.exports = { } 中添加代码，其目的是：这样webpack就不会把vue.js, vue-router, iview库打包了

externals: {
    'vue': 'Vue',
    'vue-router': 'VueRouter',
    'iview': 'Iview',
    'axios': 'Axios',
},

3,取消生成map文件，找到config/index.js中的productionSourceMap: true,把true改为false;

/**
 * Source Maps
 */

productionSourceMap: false,

优化后npm run dev:

优化后npm run build构建：

百里狂生

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue之打包优化

最近写项目，4个平台的项目由一个代码库管理，超过50个.vue文件，导致代码量过大，每次构建打包速度都很慢，下面是针对vue打包构建优化的一些测试结果：第一次npm run dev :第一次npm run dev第一次npm run build构建:第一次npm run build构建优化修改如下：1，采用cdn加载UI库，把不常改变的库放到index.html中，通过......
复制链接

扫一扫