资讯

历史

科技

环境与自然

成长

游戏

财经

文学与艺术

美食

健康

家居

文化

情感

汽车

三农

军事

旅行

运动

教育

生活

星座命理

<%= htmlWebpackPlugin.options.title %>

创作时间:

作者:

@小白创作中心

<%= htmlWebpackPlugin.options.title %>

引用

CSDN

https://blog.csdn.net/mayuhao0000/article/details/143991216

在前端开发中，Webpack作为主流的模块打包工具，其打包优化对于提升应用性能至关重要。本文将从使用CDN、页面分包处理、图片资源优化等多个维度，详细介绍如何有效减少Webpack打包后的包体积，从而提升应用的加载速度和用户体验。

前言

在大型前端项目中，经过Webpack打包后的产物往往体积较大，这会严重影响应用上线后的用户体验。本文将基于Webpack5，分享几种非常有效的优化方法，帮助开发者在短时间内显著提升Web应用的性能。

分析打包结果

在进行优化之前，我们需要先分析当前的打包结果。这里推荐使用webpack-bundle-analyzer插件，它能够以可视化的方式展示打包结果，帮助我们快速定位优化点。

首先，通过npm安装该插件：

npm i webpack-bundle-analyzer -D

然后，在vue-config.js中引入并配置该插件：

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

执行npm run build命令后，会自动打开一个分析页面，展示打包结果的详细信息。通过分析，我们可以发现以下几个优化方向：

第三方库（如ElementUI、lodash）占用了大量空间，可以考虑使用CDN来管理这些资源。
应用包含多个页面，可以采用分包策略来优化加载。
图片资源占总体积的90%以上，需要制定专门的优化策略。

使用CDN

CDN（内容分发网络）能够显著提升资源加载速度，特别是对于一些公共库（如Vue、Vuex、Vue-Router、ElementUI等）。虽然使用CDN通常需要付费，但许多公共库提供了免费的CDN服务，如BootCDN。

寻找CDN

推荐使用BootCDN来寻找所需的CDN资源。在选择CDN资源时，建议优先选择带有.min后缀的压缩版本，以进一步减小体积。

引用CDN

在public/index.html中引用CDN资源时，需要注意以下几点：

使用模板引擎提供的环境判断，确保CDN资源只在生产环境中被引入。
对于全局注册的对象（如Vue、Vuex、ElementUI），需要在代码中添加兼容性判断。

示例代码如下：

<!DOCTYPE html>
<html lang="">
  <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">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <link href="https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet">
    <% if(NODE_ENV === 'production') { %>
    <link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.14/theme-chalk/index.min.css" rel="stylesheet">
    <% } %>
    <title><%= htmlWebpackPlugin.options.title %></title>
  </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 -->
    <% if(NODE_ENV === 'production') { %>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vuex/3.6.2/vuex.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue-router/3.5.1/vue-router.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.14/index.min.js"></script>
    <% } %>
  </body>
</html>

在代码中添加兼容性判断：

if (!window.VueRouter) {
  Vue.use(VueRouter)
}
if (!window.Vuex) {
  Vue.use(Vuex)
}
if (!window.ELEMENT) {
  Vue.use(ElementUI)
}

忽略资源打包

既然已经通过CDN引用了相关资源，就需要在Webpack配置中忽略这些依赖。在webpack.config.js中添加externals配置：

const WebpackCommonConfigs = {
  transpileDependencies: true,
};
// 生产环境
if (process.env.NODE_ENV === 'production') {
  module.exports = defineConfig({
    ...WebpackCommonConfigs,
    configureWebpack: {
      plugins: [
        new BundleAnalyzerPlugin()
      ],
      externals: {
        vue: 'Vue',
        'element-ui': 'ELEMENT',
        vuex: 'Vuex',
        'vue-router': 'VueRouter',
      }
    }
  });
} else { // 开发环境
  module.exports = defineConfig({
    ...WebpackCommonConfigs,
  });
}

通过上述优化，第三方依赖库的体积从2.92MB减小到283.03KB，体积减小了1000%，效果非常明显。

页面分包处理

页面分包处理的目的是让不同页面的资源能够独立加载，避免一次性加载所有页面的资源。这可以通过路由懒加载来实现。

在Vue Router的配置中，将每个页面的组件改为动态导入的形式：

component: () => import('./general/Index.vue')

为了更好地管理chunk名称，可以添加Webpack注释：

component: () => import(/* webpackChunkName: "general" */'./general/Index.vue')

图片资源优化

图片资源是影响包体积的重要因素，可以通过以下两种方式来优化：

对静态图片资源进行压缩，提升渲染速率。
设置小于200KB的图片转化为Base64格式，减少小图片形成的多请求的情况。

图片压缩

使用image-webpack-loader插件来压缩图片资源。在vue.config.js中添加相关配置：

module: {
  rules: [{
    test: /\.(gif|png|jpe?g|svg)$/i,
    use: [
      {
        loader: 'image-webpack-loader',
        options: {
          mozjpeg: {
            progressive: true,
            quality: 60,
          },
          pngquant: {
            quality: [0.65, 0.70],
            speed: 4
          },
        }
      },
    ],
  }]
}

Base64转化

对于小于200KB的图片，可以将其转化为Base64格式，减少HTTP请求次数。在vue.config.js中添加相关配置：

module: {
  rules: [
    {
      test: /\.(gif|png|jpe?g|svg)$/i,
      type: "asset",
      parser: {
        dataUrlCondition: {
          maxSize: 200 * 1024  // 小于200kb大小的图片转base64格式
        }
      },
      generator: {
        filename: "img/[hash:7][ext]"
      }
    },
  ]
}