Vue 如何减少打包文件大小 / 提升访问性能

wuyuedefeng commented 4 years ago

安装体积分析插件`webpack-bundle-analyzer`

npm install --save-dev webpack-bundle-analyzer

配置

// vue.config.js
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
     configureWebpack: {
         plugins: [new BundleAnalyzerPlugin()]
     }
};

重新运行构建命令npm run build，构建后将自动打开分析页面

如果需要分析打包速度可使用插件：speed-measure-webpack-plugin

lodash

优化方案，使用的函数单独引用，不要全部引入， eg:

# import _ from 'lodash'
import debounce from 'lodash/debounce'

组件使用CDN

防止将某些 import 的包(package)打包到 bundle 中，而是在运行时(runtime)再去从外部获取这些扩展依赖

module.exports = {
  configureWebpack: config => {
    config.externals = {
      vue: "Vue",
      "element-ui": "ELEMENT",
      "vue-router": "VueRouter",
      vuex: "Vuex",
      axios: "axios"
    };
  },
  chainWebpack: config => {
    const cdn = {
      // 访问https://unpkg.com/element-ui/lib/theme-chalk/index.css获取最新版本
      css: ["//unpkg.com/element-ui@2.10.1/lib/theme-chalk/index.css"],
      js: [
        // 建议unpkg.com(国外)替换为unpkg.zhimg.com(国内 知乎)，
        "//unpkg.com/vue@2.6.10/dist/vue.min.js", // 访问https://unpkg.com/vue/dist/vue.min.js获取最新版本
        "//unpkg.com/vue-router@3.0.6/dist/vue-router.min.js",
        "//unpkg.com/vuex@3.1.1/dist/vuex.min.js",
        "//unpkg.com/axios@0.19.0/dist/axios.min.js",
        "//unpkg.com/element-ui@2.10.1/lib/index.js"
      ]
    };

    // 如果使用多页面打包，使用vue inspect --plugins查看html是否在结果数组中
    config.plugin("html").tap(args => {
      // html中添加cdn
      args[0].cdn = cdn;
      return args;
    });
  }
};

在 public/index.html 中添加

<!-- 使用CDN的CSS文件 -->
<% for (var i in htmlWebpackPlugin.options.cdn &&
htmlWebpackPlugin.options.cdn.css) { %>
<link rel="stylesheet" href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" />
<% } %>

<!-- 使用CDN的JS文件 -->
<% for (var i in htmlWebpackPlugin.options.cdn &&
htmlWebpackPlugin.options.cdn.js) { %>
<script
  type="text/javascript"
  src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"
></script>
<% } %>

https://www.jianshu.com/p/481e7214a134

wuyuedefeng commented 4 years ago

webpack-bundle-analyzer 自定义命令, 添加环境变量

package.json

{
  "scripts": {
    "build:analyzer": "use_analyzer=true vue-cli-service build",
  }
}

vue.config.js

module.exports = {
  configureWebpack: config => {
    if (process.env.use_analyzer) {
      config.plugins.push(new BundleAnalyzerPlugin())
    }
  }
}

wuyuedefeng commented 4 years ago

vue.config.js 生产移除map文件

module.exports = {
  productionSourceMap: false,
}

wuyuedefeng commented 4 years ago

Gzip加速

这个方法的压缩代码能力是非常恐怖的,压缩率可达70%,不过需要了解的是需要服务器开启 gzip 加速才管用, 对服务器会造成一定的压力;

nginx 配置 http://m.zzvips.com/article/33321.html

wuyuedefeng commented 4 years ago

使用 polyfill 动态服务

动态 polyfill 指的是根据不同的浏览器，动态载入需要的 polyfill。 Polyfill.io 通过尝试使用 polyfill 重新创建缺少的功能，可以更轻松地支持不同的浏览器，并且可以大幅度的减少构建体积。

Polyfill Service 原理: 识别 User Agent，下发不同的 Polyfill

使用方法：在 index.html 中引入如下 script 标签

<script crossorigin="anonymous" src="https://polyfill.io/v3/polyfill.min.js"></script>

wuyuedefeng commented 4 years ago

减小`lodash`打包体积

可以借助babel-plugin-lodash和lodash-webpack-plugin这两个插件

相关文章 https://zhuanlan.zhihu.com/p/36280323

wuyuedefeng / blogs