使用 webpack 打包优化 vue 项目

前言

随着前端技术的不断发展，越来越多的企业和团队选择使用 Vue.js 构建前端应用。在项目开发之后，如何打包优化也成为了一个不可忽视的问题。本文将介绍如何使用 webpack 对 Vue 项目进行打包优化。

Webpack 基础

在介绍如何优化 Vue 项目前，首先需要了解一些基础的 Webpack 概念。

入口与出口

Webpack 打包需要指定入口文件和出口文件。入口文件指的是项目的主要入口，出口文件则是打包后的文件。

// webpack.config.js
module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  }
}

上述代码中，入口文件为 ./src/main.js，出口文件为 dist/bundle.js。

Loader

Webpack 通过 Loader 实现对不同类型的文件的处理，例如将 ES6 代码转换为 ES5 代码、处理 LESS、SASS 等文件。

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.less$/,
        use: [
          'style-loader',
          'css-loader',
          'less-loader'
        ]
      }
    ]
  }
}

上述代码中，针对匹配 .less 文件的规则，使用了 style-loader、css-loader 和 less-loader 对文件进行处理。

Plugin

Webpack 通过 Plugin 对打包的过程进行控制和定制，例如压缩 JS、提取 CSS 等。

// webpack.config.js
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

module.exports = {
  plugins: [
    new UglifyJsPlugin()
  ]
}

上述代码中，使用了 UglifyJsPlugin 插件来压缩 JS 文件。

Vue 项目优化

了解了 Webpack 基础后，下面将介绍如何针对 Vue 项目进行优化。本文介绍的方法适用于 Vue 2.x。

减小打包体积

使用 CDN

对于频繁使用的第三方库，可以使用 CDN 引入，避免打包时将这些库打包进去。

例如以下代码：

<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>

使用 Tree Shaking

Tree Shaking 是一种通过静态分析去掉无用代码的技术。可以使用 UglifyJsPlugin 插件自带的 warningsFilter 去掉 console 语句等调试用的代码，减小打包体积。

以下是配置文件示例：

// webpack.config.js
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

module.exports = {
  plugins: [
    new UglifyJsPlugin({
      uglifyOptions: {
        warningsFilter: (src) => {
          if (/console.log/.test(src)) {
            return false
          }
          
          return true
        }
      }
    })
  ]
}

采用异步加载

对于一些不经常使用的大型组件，可以将它们使用异步加载的方式处理。

在 Vue 2.x 中，可以使用 import 方法异步加载组件，例如：

// Home.vue
export default {
  components: {
    'my-comp': () => import('./MyComp.vue')
  }
}

在打包时，这些组件会被单独打包成一个文件，不会在主包中出现。

缓存构建结果

由于打包需要耗费一定时间，可以尝试缓存构建结果。

在 Webpack 4.x 中，Webpack 自带了 cache 选项，可以使用默认的内存缓存，例如：

// webpack.config.js
module.exports = {
  cache: true
}

分包

对于比较大型的项目，可以将代码拆分成多个模块进行分包处理，在使用时再进行加载。在 Vue 2.x 中，可以使用 vue-router 来实现路由的懒加载，例如：

const Foo = () => import('./Foo.vue')
const Bar = () => import('./Bar.vue')

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo
    },
    {
      path: '/bar',
      component: Bar
    }
  ]
})

静态资源处理

对于 CSS、图片等资源，可以通过以下方式处理：

处理图片

使用 url-loader 和 file-loader 对图片进行处理，当图片大小小于指定大小时，使用 url-loader 将图片转换成 base64 格式，否则使用 file-loader 将图片打包到指定目录下。

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000, // 图片小于10KB，转成base64
          name: 'img/[name].[hash:8].[ext]' // 其他情况，打包到指定目录
        }
      }
    ]
  }
}

处理 CSS

使用 style-loader 和 css-loader 处理 CSS 文件，以及使用 postcss-loader 对 CSS 文件进行兼容性处理和浏览器前缀添加。可以使用 mini-css-extract-plugin 插件将 CSS 文件单独打包。

// webpack.config.js
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader
          },
          'css-loader',
          'postcss-loader'
        ]
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'css/[name].[chunkhash:8].css'
    })
  ]
}

总结

本文介绍了如何使用 Webpack 对 Vue 项目进行打包优化，包括减小打包体积、采用异步加载、缓存构建结果、分包、静态资源处理等。在实际项目中，可以根据具体情况灵活选择相应的优化策略。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/658cd2bdeb4cecbf2d29bb92