vue-cli3学习第六节之超级简单的优化打包后的体积以及首页加载

最新推荐文章于 2024-09-25 11:24:51 发布

前端架构师陈龙威

最新推荐文章于 2024-09-25 11:24:51 发布

阅读量1.3k

点赞数

分类专栏： vue-cli3.x 文章标签： vue-cli3.x vue

本文链接：https://blog.csdn.net/qq_39974331/article/details/90643405

版权

vue-cli3.x 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

推荐一首歌：「Swallowtail Butterfly ～あいのうた～」from 消滅都市 (TV size) -------- 花澤香菜

写这篇的时候其实我项目还没写完，不过突然想写了，就先写着吧。

先给项目打个包，200kb的总体积，相对很多项目已经很小了，但是既然还有更小的方法，为什么不用呢？

如何来用？

首先，项目中很多框架比如vue，vue-router，polyfill，axios，vuex等都会在打包时被打入，从而增大了打包后的体积。从资源加载的角度来看，比如页面能同时加载10个50kb左右的资源保证正常速度，加载时间为50ms，但是加载1个200kb的资源也是正常速度，加载时间为200ms，这就显示出差距了。所以将大资源切分成多个小资源就是必要的了，当然，也不是切分成越多越好，同时加载的个数浏览器处理也是有限度的。

如何切分成多个？可以通过外链引入框架，打包的只有我们自己的代码和一些小框架中的按需引入。

此处本人项目使用了：vue，vue-router，polyfill，axios，vuex，vant。

由于vant是按需加载的，不考虑切分，其他框架都是全部引入的，所以我们配置在打包正式或者测试环境的时候不打包进去，开发环境还是直接引入本地资源即可，不用考虑切分。

说到配置，就是webpack的配置了，首先在vue.config.js，找到webpack配置：

// src/vue.config.js

const cdn = {
    css: [],
    js: [
        'https://xxx.com/cssjs/Cookies/js.cookie.js',
        'https://xxx.com/cssjs/polyfill.min.js',
        'https://xxx.com/cssjs/vue-2.5.17-min.js',
        'https://xxx.com/cssjs/vue-router-3.0.1-min.js',
        'https://xxx.com/cssjs/axios-0.18.0-min.js',
        'https://xxx.com/cssjs/vuex-3.0.1-min.js',
    ]
}

module.exports = {
    // webpack配置
    configureWebpack: config => {
        if (process.env.NODE_ENV === "production" || "test") {
            // 配置不打包参数
            // externals的key是后面需要require的名字，value是第三方库暴露出来的方法名
            // 已知："element-ui": "Element", "qs": "Qs", "mint-ui": "MINT","vue-aplayer":"VueAPlayer"
            // 其他的还需少年努力找哈
            config.externals = {
                "vue": "Vue",
                "vue-router": "VueRouter",
                "vuex": "Vuex",
                "axios": "axios",
                "babel-polyfill": "window"
            }
        }
    },
    chainWebpack: config => {
        if (process.env.NODE_ENV === "production" || "test") {
            config.plugin("html").tap(options => {
                options[0].cdn = cdn;
                return options;
            })
        }
    }
    
}

配置終わり，那么只需要引入下即可，在哪引入？在public/index.html中：

<!DOCTYPE html>
<html lang="en">
  <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>vue-demo</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">
    <% } %>
    <!-- 使用CDN的JS文件 -->
    <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %>
    <link href="<%= htmlWebpackPlugin.options.cdn.js[i] %>" rel="preload" as="script">
    <% } %>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but vue-demo doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <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>

好了，配置和引入都完成了，那么开始打包，npm run build , 打开一看，原来200kb的包变成了50kb的，不过多了其他插件的cdn引入加载，