前后对比

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

压缩过后1.43Mb

开启cdn，不打包vue\element\echarts,，打包下来225.25k

webpack是啥

Webpack是一个现代化的JavaScript应用程序的静态模块打包器，它使用的是模块的概念。它可以将各种资源，如JavaScript文件、样式文件、图片、字体等，都视为模块，然后将这些模块打包成JavaScript代码。这样做可以减少HTTP请求次数，提高页面加载速度。除了打包，Webpack还具有其他功能，如开发服务器、热模块替换、代码分割等等。它是现代化前端开发中必不可少的工具之一。

使用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
nginx.conf

gzip on;  #是否开启gzip模块 on表示开启 off表示关闭
gzip_buffers 4 16k;  #设置压缩所需要的缓冲区大小
gzip_comp_level 6;  #压缩级别1-9，数字越大压缩的越好，也越占用CPU时间
gzip_min_length 100k;  #设置允许压缩的最小字节
gzip_http_version 1.1;  #设置压缩http协议的版本,默认是1.1
gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript;  #设置压缩的文件类型
gzip_vary on;  #加上http头信息Vary: Accept-Encoding给后端代理服务器识别是否启用 gzip 压缩

压缩图片

可以使用插件image-webpack-loader进行压缩

使用webpack-bundle-analyzer

打包分析工具

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

使用uglifyjs-webpack-plugin

去掉console

  const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
  let optimization = [
    new UglifyJsPlugin({
      uglifyOptions: {
        compress: {
          warnings: false,
          drop_debugger: true, //去掉debugger
          drop_console: true, // 去掉console
          pure_funcs: ["console.log"], // 移除console
        },
      },
      sourceMap: config.build.productionSourceMap,
      parallel: true,
    }),
  ];
  webpackConfig.plugins.push(...optimization);

cdn方式

cdn推荐
https://www.bootcdn.cn/

使用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>
  <% }}) %>

结束

本文分享webpack_vue打包优化打包到此结束，感谢你的阅读！
网站：https://yongma16.xyz/#/

开启gzip成功