webpack3插件CommonChunkPlugin分离第三方库和公共模块

最新推荐文章于 2024-07-01 19:45:00 发布

E_li_na

最新推荐文章于 2024-07-01 19:45:00 发布

阅读量5.7k

点赞数

分类专栏： Webpack3.5.5 工具

本文链接：https://blog.csdn.net/E_li_na/article/details/80407091

版权

本文介绍了webpack3中如何利用CommonChunkPlugin插件优化项目，通过配置分离第三方库、公共模块以及webpack运行文件，降低bundle大小，提高加载速度。详细讲述了配置过程与注意事项。

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

个性定位：优化利器

可以建立一个独立文件(又称作 chunk)的功能，用于提取第三方库和公共模块。
但是webpack 4已经到取消了这个插件，转而使用SplitChunksPlugin，相关文章webpack4: 代码分割CommonChunkPlugin的寿终正寝,详解CommonsChunkPlugin的配置和用法

1、不分离出第三方库和公共模块

1、1 准备文件

src目录下创建以下文件：

common.js
export const common = 'common file';

first.js
import {common} from './common';
import $ from 'jquery';
console.log($，`first  ${common}`);

second.js
import {common} from './common';
import $ from 'jquery';
console.log($，`second ${common}`);