Vuecli3.0 借助DLLPlugin 和 DLLReferencePlugin 用某种方法实现了拆分 bundles，同时还大大提升了构建的速度。

最新推荐文章于 2024-06-11 15:14:38 发布

理个以哈呦

最新推荐文章于 2024-06-11 15:14:38 发布

阅读量2.4k

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/qq_15253407/article/details/90077207

版权

本文介绍了如何在Vuecli3.0项目中借助DLLPlugin和DLLReferencePlugin来拆分常用库，从而提高构建速度。通过新增webpack.dll.conf配置文件和修改vue.config.js，实现库的预打包，有效减少了后续打包时间。

摘要由CSDN通过智能技术生成

DLLPlugin 和 DLLReferencePlugin Vuecli 3.0

在vue项目，在打包的过程中将，常用的包进行提前打包，节省之后打包的时间。

1.新增库打包文件webpack.dll.conf

const path = require('path');
const webpack = require('webpack');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const package = require('./package.json');

const dllPath = package.dllPath; // 输出打包后的目录

module.exports = {
    entry: {
        // 需要提取的库文件
        vendor: ['vue', 'vue-router', 'vuex', 'axios', 'element-ui', 'html2canvas', 'vconsole', 'vue-axios', 'v-viewer']
    },
    output: {
        path: path.join(__dirname, dllPath),
        filename: 'dfg.[name].dll.[hash:8].js',
        library: '[name]_[hash]'
    },
    plugins: [
        new CleanWebpackPlugin(), // https://www