流畅前行，webpack 构建优化

前端

2023-11-19 17:30:36

内容简介：

Webpack 构建优化概述
基于 webpack4 搭建 vue2、vuex 多页应用框架
优化构建配置
使用代码分割提高性能
实践证明

正文：

Webpack 构建优化概述

随着前端项目的日益复杂，构建工具也变得越来越重要。Webpack 是目前最流行的前端构建工具之一，它可以将各种资源（如 JavaScript、CSS、图片等）打包成一个或多个文件，从而提高加载速度和减少 HTTP 请求数。

基于 webpack4 搭建 vue2、vuex 多页应用框架

首先，我们需要安装必要的依赖项：

npm install vue vuex webpack webpack-cli webpack-dev-server --save-dev

然后，创建一个新的项目目录，并在其中创建一个 package.json 文件，内容如下：

{
  "name": "vue2-vuex-multi-page-app",
  "version": "1.0.0",
  "description": "A Vue.js 2 + Vuex + webpack 4 multi-page application",
  "main": "index.js",
  "scripts": {
    "dev": "webpack-dev-server --open",
    "build": "webpack --mode production"
  },
  "devDependencies": {
    "vue": "^2.6.11",
    "vuex": "^3.1.2",
    "webpack": "^4.41.2",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.0"
  }
}

接下来，在项目目录中创建一个 src 文件夹，并在其中创建一个 index.js 文件，内容如下：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})

new Vue({
  el: '#app',
  store,
  data: {
    message: 'Hello Vue!'
  },
  template: `
    <div>
      <h1>{{ message }}</h1>
      <p>Count: {{ count }}</p>
      <button @click="increment">+</button>
    </div>
  `,
  methods: {
    increment () {
      this.$store.commit('increment')
    }
  }
})

最后，在项目目录中创建一个 index.html 文件，内容如下：

<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <div id="app"></div>

  <script src="dist/main.js"></script>
</body>
</html>

现在，我们可以通过运行以下命令来启动开发服务器：

npm run dev

然后，浏览器会自动打开 http://localhost:8080，我们就可以看到一个简单的 Vue.js 应用程序。

优化构建配置

在构建应用程序时，我们可以通过优化 webpack 的配置来提高构建速度和性能。

首先，我们可以使用 webpack-merge 来合并不同的 webpack 配置。这样，我们可以将公共的配置放在一个单独的文件中，然后在不同的环境中使用不同的配置。

const webpack = require('webpack')
const merge = require('webpack-merge')

const commonConfig = {
  // 公共配置
}

const developmentConfig = {
  // 开发环境配置
}

const productionConfig = {
  // 生产环境配置
}

module.exports = (env, argv) => {
  switch (argv.mode) {
    case 'development':
      return merge(commonConfig, developmentConfig)
    case 'production':
      return merge(commonConfig, productionConfig)
    default:
      throw new Error('Unknown mode: ' + argv.mode)
  }
}

然后，我们可以使用 webpack-bundle-analyzer 来分析构建结果。这样，我们可以看到哪些模块占用了最多的空间，并采取措施来减少它们的体积。

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin

module.exports = {
  // ...其他配置
  plugins: [
    new BundleAnalyzerPlugin()
  ]
}

使用代码分割提高性能

代码分割是 webpack 提供的一种技术，它可以将应用程序的代码分成多个块，然后在需要时加载这些块。这可以减少初始加载时间并提高应用程序的性能。

我们可以使用 webpack.optimize.splitChunks 来配置代码分割。

module.exports = {
  // ...其他配置
  optimization: {
    splitChunks: {
      chunks: 'all',
      minSize: 30000,
      maxSize: 50000,
      minChunks: 1,
      maxAsyncRequests: 5,
      maxInitialRequests: 3,
      automaticNameDelimiter: '~',
      name: true
    }
  }
}