阅读 88

vue打包优化 —— 持续更新

项目 :vue.config.js

引入打包加速插件,引入打包进度插件

npm install hard-source-webpack-plugin
npm install progress-bar-webpack-plugin
npm install chalk
复制代码

image.png

image.png

通过 externals 加载外部 CDN 资源

vue.config.js 的 chainWebpack 属性中,判断若打包环境为生产环境,则设置 externals配置打包时需跳过的资源

chainWebpack: config => {
    if (IS_PROD) {
        config.set('externals', {
            vue: 'Vue',
            'vue-router': 'VueRouter',
            vuex: 'Vuex',
            axios: 'axios'
        })
    }
}
复制代码

前往 public\index.html 文件中,把刚刚移除的资源通过链接的方式进行加载

<script src="https://cdn.staticfile.org/axios/0.21.4/axios.min.js"></script>
<script src="https://cdn.staticfile.org/vue-router/3.5.2/vue-router.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script src="https://cdn.staticfile.org/vuex/3.6.2/vuex.min.js"></script>
复制代码

优化前

image.png

优化后(后续项目越大,加载的第三方包越多,该优化越明显)

image.png

仅在开发环境下使用mock,利用tree shaking属性给打包瘦身

在 src\main.js 项目入口文件中,对mock数据的引入时,必须加上环境的判断 尽在开发环境下使用mock模块 vue-cli自身打包时即会利用webpack的tree shaking属性跳过使用过的代码

// 仅在开发环境时引入mock
if (process.env.NODE_ENV === "development") {
  require("./request/mock/index.js"); // 模拟普通请求状态的mock
}
复制代码

优化前

image.png

优化后

无需任何额外操作,整个mock模块消失不见 image.png

文章分类
前端
文章标签