react学习笔记（四）（扫盲贴）

• 有关于webpack 的dll文件

dll文件是什么？（百度百科）

DLL(Dynamic Link Library)文件为动态链接库文件，又称“应用程序拓展”，是软件文件类型。在Windows中，许多应用程序并不是一个完整的可执行文件，它们被分割成一些相对独立的动态链接库，即DLL文件，放置于系统中。当我们执行某一个程序时，相应的DLL文件就会被调用。一个应用程序可使用多个DLL文件，一个DLL文件也可能被不同的应用程序使用，这样的DLL文件被称为共享DLL文件。

以上是百科中dll文件的介绍：而webapck的dll是借鉴了Windows系统的dll。一个dll包，就是一个纯纯的依赖库，它本身不能运行，是用来给你的app引用的。打包dll的时候，Webpack会将所有包含的库做一个索引，写在一个manifest文件中，而引用dll的代码（dll user）在打包的时候，只需要读取这个manifest文件，就可以了。

好处：

1. Dll打包以后是独立存在的，只要其包含的库没有增减、升级，hash也不会变化，因此线上的dll代码不需要随着版本发布频繁更新。
2. App部分代码修改后，只需要编译app部分的代码，dll部分，只要包含的库没有增减、升级，就不需要重新打包。这样也大大提高了每次编译的速度。
3. 假设你有多个项目，使用了相同的一些依赖库，它们就可以共用一个dll。

vendors是什么

vendors是利用CommonsChunkPlugin插件抽出公用模块打包出来的文件。

CommonsChunkPlugin主要是用来提取第三方库和公共模块，避免首屏加载的bundle文件或者按需加载的bundle文件体积过大，从而导致加载时间过长，对于webpack压缩功能的优化很有意义。

一般plugins配置如下：
 

        new webpack.optimize.CommonsChunkPlugin({
            name: 'vendors', // 将公共模块提取，生成名为`vendors`的chunk
            chunks: ['index','list','about'], //提取哪些模块共有的部分
            minChunks: 3 // 提取至少3个模块共有的部分
        }),

 

References:

webpack vendors是干啥用的 多大算正常范围内 我的怎么320kb

详解CommonsChunkPlugin的配置和用法

彻底解决 webpack 打包文件体积过大

Webpack的dll功能使用