vue-cli2 构建速度优化的实现方法

yizhihongxing

针对“vue-cli2 构建速度优化的实现方法”的完整攻略,我可以为你提供以下几个步骤:

1. 使用线程池

在项目目录下的build/webpack.base.conf.js文件中,我们可以使用thread-loader来开启线程池,将耗时的操作放置在子进程中进行提高构建速度。

// ...
const threadLoader = require('thread-loader');

threadLoader.warmup({
  // the number of CPUs/cores you want to allocate for your child processes
  // 默认情况下将使用 CPU 的数量
  workers: require('os').cpus().length - 1,
  // how long the idle timeout is for workers
  // 闲置多久后关闭子进程
  // 默认是 500ms
  workerTimout: 5000,
});

module.exports = {
  // ...
  module: {
      rules: [
          {
            test: /\.js$/,
            loader: [
              'thread-loader',
              'babel-loader',
            ],
            // 可选配置项
            options: {
              // 活着的 worker 的数量
              // 默认是 (os.cpus().length - 1)
              workers: 2,
            },
          },
      ],
  },
};

使用线程池可以大幅提升构建速度,特别是在处理较大的代码库时。

2. 使用 DLLPlugin

Vue Cli 2 默认生成的项目中已经使用了 commons chunk 来提取公共模块,然而在构建应用的过程中,每次重新构建都需要重新构建一次 vendorjs,因此我们可以使用 DLLPlugin 抽取第三方模块,将它们打成静态资源文件避免每次构建都重复打包。

2.1 安装依赖

在项目目录下运行以下命令安装所需的依赖:

yarn add -D webpack@^3.0.0 webpack-dev-server@^3.0.0 webpack-merge@^4.0.0 dll-webpack-plugin@^1.0.0 uglifyjs-webpack-plugin@^2.0.0

2.2 添加配置文件

在项目根目录下添加如下配置文件:

// webpack.dll.conf.js
const path = require('path');
const webpack = require('webpack');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

const config = {
  entry: {
    vendor: [
      'vue',
      'vue-router',
      'vuex',
    ],
  },
  output: {
    path: path.join(__dirname, './src/dll'),
    library: '[name]_[hash]',
  },
  plugins: [
    new webpack.DllPlugin({
      path: path.join(__dirname, './src/dll', '[name]-manifest.json'),
      name: '[name]_[hash]',
    }),
    // 打包后再进行一次压缩
    new UglifyJsPlugin({
      sourceMap: true,
      compress: {
        warnings: false,
        // 忽略 console.log
        drop_console: true,
      },
    }),
  ],
};
module.exports = config;

2.3 添加 Npm Script

package.json文件中添加以下脚本:

{
  // ...
  "scripts": {
    // ...
    "build:dll": "webpack --config build/webpack.dll.conf.js",
  }
}

2.4 构建 DLL

执行以下命令,构建 DLL:

yarn build:dll

执行完成后,生成的 dll 目录下将包含 vendor.dll.jsvendor-manifest.json 两个文件。

2.5 修改 build/webpack.prod.conf.js

build/webpack.prod.conf.js文件中添加以下配置:

const webpack = require('webpack');
const { merge } = require('webpack-merge');
const webpackBaseConfig = require('./webpack.base.conf');
// 指向 vendor.manifest.json 文件
const manifest = require('../src/dll/vendor-manifest.json');

module.exports = merge(webpackBaseConfig, {
  mode: 'production',
  devtool: false,
  output: {
      publicPath: './',
      filename: utils.assetsPath('js/[name].[chunkhash].js'),
      chunkFilename: utils.assetsPath('js/[id].[chunkhash].js'),
  },
  optimization: {
      splitChunks: {
          chunks: "all",
          cacheGroups: {
              vendor: {
                  // 指向 vendor.manifest.json 文件
                  test: /node_modules\/(vue|vue-router|vuex)\//,
                  name: 'vendor',
                  enforce: true,
              },
          },
      },
      runtimeChunk: true,
  },
  plugins: [
    new webpack.DllReferencePlugin({
      context: process.cwd(),
      manifest,
    }),
  ],
});

这样在生产打包时,就不用每次都打包第三方库了。

上述两个方法在 Vue 2.x 项目中都有很大的帮助,可以较大程度地提升构建速度,特别在项目庞大且开发者较多的情况下,更是如此。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:vue-cli2 构建速度优化的实现方法 - Python技术站

(0)
上一篇 2023年5月28日
下一篇 2023年5月28日

相关文章

  • JS基于ES6新特性async await进行异步处理操作示例

    以下是JS基于ES6新特性async await进行异步处理操作的完整攻略: 什么是Async/Await Async/Await是ES2017引入的异步编程新特性,通过async函数定义的异步函数和await关键字的使用,可以大大简化异步编程的代码复杂度,使代码更加清晰易懂。 Async/Await的使用方法 定义异步函数 异步函数的定义需要使用async…

    Vue 2023年5月28日
    00
  • 分享Vue组件传值的几种常用方式(二)

    请听我详细讲解“分享Vue组件传值的几种常用方式(二)”的完整攻略。 一、前言 在Vue组件传值的开发过程中,我们通常会遇到如下问题:如何在不同的组件之间传递数据?如何在父子组件之间通信?如何在没有父子关系的组件之间传递数据?这些问题都可以通过不同的方式来解决。在上一篇文章中,我们分享了“prop与$emit”这种传值方式。而今天,我们来分享“provide…

    Vue 2023年5月27日
    00
  • 在vue中created、mounted等方法使用小结

    在Vue中created、mounted等方法使用小结 Vue.js是一个基于MVVM模式的前端开发框架,它的核心是数据与视图的绑定,通过创建Vue实例,可以轻松地控制页面中的数据和DOM元素。在Vue.js中,生命周期钩子函数是非常重要的一部分,主要用于在Vue实例创建、挂载、更新、销毁等各个阶段进行逻辑处理,比如数据初始化、组件渲染、数据更新等。在这些生…

    Vue 2023年5月28日
    00
  • vue前端如何向后端传递参数

    下面是vue前端向后端传递参数的详细攻略: 一、GET请求传递参数 在使用GET请求时,我们可以将参数拼接在URL中,作为查询参数。如下面的示例: axios.get(‘/api/user?id=123&name=张三’) .then(function (response) { console.log(response); }) .catch(fun…

    Vue 2023年5月27日
    00
  • vue实现路由监听和参数监听

    针对“vue实现路由监听和参数监听”的问题,我提供以下完整攻略。 路由监听 Vue中实现路由监听,我们可以借助Vue-router提供的钩子函数,主要是监听路由的变化。通过路由对象$route的监控,可以获取当前路由相关信息(如:路由路径,路由参数,路由组件等),具体如下: 1.使用官方提供的beforeEach和afterEach全局路由钩子 在路由文件(…

    Vue 2023年5月27日
    00
  • vue.js父组件使用外部对象的方法示例

    下面是详细的攻略。 Vue.js父组件使用外部对象的方法示例 在Vue.js中,我们可以通过props(属性)将数据从父组件传递给子组件。同样地,如果你想在子组件中使用父组件中的方法,则需要使用事件来实现。 但是,有时候我们需要在父组件中使用子组件中的方法。这时候,我们需要使用$refs来访问子组件。当父组件渲染完成后,就可以通过$refs引用子组件并使用其…

    Vue 2023年5月28日
    00
  • vue + element动态多表头与动态插槽

    “vue + element动态多表头与动态插槽”的攻略如下: 1. 动态多表头 动态多表头的实现需要借助element-ui的<el-table-column>组件的嵌套。具体实现步骤如下: 在vue的data中定义动态表头的数据,包括每个表头的名称、宽度等信息,可以使用一个数组来存储。 data() { return { tableHeade…

    Vue 2023年5月28日
    00
  • Vuejs开发环境搭建及热更新【推荐】

    Vuejs开发环境搭建及热更新攻略 1. 安装Node.js和npm 在开始Vuejs的开发之前,我们需要先安装Node.js。这是一款基于Chrome V8引擎的JavaScript运行环境。 在安装Node.js的时候,会自动安装npm,npm是一个可以解决Node.js插件之间依赖的包管理器。可以通过这个命令来检查是否安装成功: node -v //查…

    Vue 2023年5月28日
    00
合作推广
合作推广
分享本页
返回顶部