Webpack之DLL

最新推荐文章于 2024-09-09 14:43:33 发布

Meskjei

最新推荐文章于 2024-09-09 14:43:33 发布

阅读量1.6k

点赞数 1

分类专栏：前端 Webpack 文章标签： Webpack DLL

本文链接：https://blog.csdn.net/hjc256/article/details/100652033

版权

本文介绍了如何使用Webpack的DLL功能优化项目打包过程，以减少重复打包第三方模块，提高打包速度。通过创建独立的Webpack配置文件生成DLL，然后在主项目配置中引用，确保DLL模块被正确加载。在实际应用中，可能会遇到配置繁琐的问题，可以通过自动化处理避免手动添加新的DLL引用。

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

引入

在我们的项目中，免不了要引入许多的第三方模块。这些第三方模块在打包的时候就会被打包进最后生成的文件之中。导致最后生成的文件过大的同时也增加了打包的时间。

这时我们就会想，如果这些第三方模块能只打包一次，之后就直接使用这些打包好的模块多好，毕竟这些第三方的模块代码不会有变动。

那么，我们再次打包目标代码时就不需要再从node_modules中去寻找第三方模块，而是从我们预先打包出的文件中去寻找。

这种想法颇似动态链接库（DLL）。

流程

由于需要单独打包第三方模块，也就意味着我们需要一个独立的Webpack配置文件，我命名为webpack.dll.js。内容如下：

const path = require('path');
const webpack = require('webpack');
module.exports = {
   
    mode: 'production',
    entry: {
   
        react: ['react', 'react-dom'],
        vendors: ['lodash']
    },
    output: {
   
        path: path.resolve(__dirname, 'dll'),
        filename: '[name].dll.js',
        library: '[name]'
    },
    plugins: [
        new webpack.DLLPliugin({
   
            name: '[name]'