vue打包解决 首屏加载速度慢

1. productionSourceMap

　　vue.config.js 中将 productionSourceMap 参数值设置为false,   去掉打包的时候生成的map文件

2.  CompressionWebpackPlugin

　　打包生成 gzip 压缩文件

　　安装： npm install  compression-webpack-plugin --save-dev

　　修改 vue.config.js 的配置文件

const CompressionWebpackPlugin = require("compression-webpack-plugin");

/**
   *  需要在改下nginx的配置  启用gzip压缩
   * */
configureWebpack: {
    plugins: [
      new CompressionWebpackPlugin({
        filename: "[path][base].gz",
        algorithm: "gzip",
        // test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),  //匹配文件名
        test: /\.js$|\.html$|.\css/,
        threshold: 10240, //对超过10k的数据压缩
        minRatio: 0.8,
        deleteOriginalAssets: false //不删除源文件
      })
    ]
  }

 

3. 使用cdn

    修改 vue.config.js

const cdn = {
  css: ["//unpkg.com/element-ui@2.13.0/lib/theme-chalk/index.css"],
  js: [
    "//unpkg.com/vue@2.6.11/dist/vue.min.js",
    "//unpkg.com/vue-router@3.0.1/dist/vue-router.min.js",
    "//unpkg.com/vuex@3.1.3/dist/vuex.min.js",
    "//unpkg.com/element-ui@2.13.0/lib/index.js"
  ]
};

module.exports = {
  pages: {
    index: {
      entry: "src/main.js",
      template: "public/index.html",
      filename: "index.html",
      title: "中国手球协会",
      chunks: ["chunk-vendors", "chunk-common", "index"],
      cdn: cdn
    }
  },
  configureWebpack: {
    externals: {
      vue: "Vue",
      "element-ui": "ELEMENT",
      "vue-router": "VueRouter",
      vuex: "Vuex"
    },
  }
}

　　然后修改 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,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
    <% for (let i in htmlWebpackPlugin.options.cdn.css) { %>
      <link rel="stylesheet" href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" />
    <% } %>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> 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 (let i in htmlWebpackPlugin.options.cdn.js) { %>
      <script
        type="text/javascript"
        src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"
      ></script>
    <% } %>
  </body>
</html>

 

posted @ 2021-06-24 17:45  申继林  阅读(266)  评论(0)  编辑  收藏  举报