前后对比

6.45Mb 未进行gzip压缩 图片压缩和去掉打印等等

压缩过后1.43Mb

使用compression-webpack-plugin

再prod.conf中配置，打包多出gzip的文件

//gzip打包优化
if (config.build.productionGzip) {
  const CompressionWebpackPlugin = require("compression-webpack-plugin");

  webpackConfig.plugins.push(
    new CompressionWebpackPlugin({
      filename: "[path].gz[query]",
      algorithm: "gzip",
      test: new RegExp(
        "\\.(" + config.build.productionGzipExtensions.join("|") + ")$"
      ),
      threshold: 2000,
      minRatio: 0.8,
    })
  );
}

nginx配置server

# gizp on

使用webpack-bundle-analyzer

if (config.build.bundleAnalyzerReport) {
  const BundleAnalyzerPlugin =
    require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
    webpackConfig.plugins.push(new BundleAnalyzerPlugin());
}

使用uglifyjs-webpack-plugin

if (config.build.ignoreLogs) {
  const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
  let optimization = [new UglifyJsPlugin()]
  webpackConfig.plugins.push(...optimization);
}

cdn方式

使用html-webpack-plugin

html-webpack-plugin可以将变量写入html作为链接用
取消vue、element、axios和echarts的打包
再prod.conf配置
声明

// cdn 引入
const externalModules = {
  'vue': 'Vue',
  'vue-router': 'VueRouter',
  'vuex': 'Vuex',
  'axios':'axios',
  'element-ui':'element-ui',
  'echarts':'echarts',
  'hljs':'highlight.js'
}
//cdn 配置
const externalConfig=[
  {js:'https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js',css:''},
  {js:'https://cdn.bootcdn.net/ajax/libs/vue-router/3.0.1/vue-router.min.js',css:''},
  {js:'https://unpkg.com/axios/dist/axios.min.js',css:''},
  {js:'https://cdn.bootcss.com/vuex/3.6.2/vuex.min.js',css:''},
  {js:'https://unpkg.com/element-ui/lib/index.js',css:'https://unpkg.com/element-ui/lib/theme-chalk/index.css'},
  {js:'https://cdn.jsdelivr.net/npm/echarts@5.3.3/dist/echarts.min.js',css:''},
  {js:'https://cdn.bootcdn.net/ajax/libs/highlight.js/11.6.0/highlight.min.js',}
]

使用html-webpack-plugin
传递参数 externalConfig

    new HtmlWebpackPlugin({
      filename:
        process.env.NODE_ENV === "testing" ? "index.html" : config.build.index,
      template: "index.html",
      inject: true,
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeAttributeQuotes: true,
        // more options:
        // https://github.com/kangax/html-minifier#options-quick-reference
      },
      // necessary to consistently work with multiple chunks via CommonsChunkPlugin
      chunksSortMode: "dependency",
      cdnConfig: externalConfig, // cdn配置
    }),

在html入口写入cdn链接

<!--    cdn -->
    <% htmlWebpackPlugin.options.cdnConfig.forEach(function(item){ if(item.css){ %>
    <link href="<%= item.css %>" rel="stylesheet" />
    <% }}) %>
  <!-- cdn -->
  <% htmlWebpackPlugin.options.cdnConfig.forEach(function(item){ if(item.js && !htmlWebpackPlugin.options.onlyCss){ %>
  <script type="text/javascript" src="<%= item.js %>"></script>
  <% }}) %>

结束

网站：https://yongma16.xyz/#/