reactjs - 使用 WebPack CommonsChunkPlugin 提取重复的 javascript 代码-6ren

reactjs - 使用 WebPack CommonsChunkPlugin 提取重复的 javascript 代码

转载作者：行者123 更新时间：2023-12-03 13:22:34

24

4

我正在使用 WebPack CommonsChunkPlugin 来提取重复代码并减少 JavaScript 代码大小。我有两个 html 页面和两个条目。我还添加了 ReactJs vendor 条目。到目前为止，在 webpack.config.js 中我们有:

var path = require("path");
var webpack = require('webpack');
var BundleTracker = require('webpack-bundle-tracker');
var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
    context: __dirname,
    entry: {
        react: ["react", "react-dom"],
        home: './assets/js/home.jsx',
        about: './assets/js/about.jsx',
    },

    output: {
        path: path.resolve('./assets/bundles/'),
        filename: "[name].js",
    },

    plugins: [
        new BundleTracker({filename: './webpack-stats.json'}),

        new webpack.optimize.CommonsChunkPlugin({
            name: 'react',
            minChunks: Infinity
        }),

        new BundleAnalyzerPlugin(),
    ],

    module: {
        rules: [
            {
              test: /\.jsx?$/, 
              exclude: /node_modules/,
              loader: 'babel-loader',
              options: { 
                  plugins: [["lodash", { "id": ["semantic-ui-react"] }]],
                  presets: ["es2015", "react"]
              }  
            },
        ],
    },

    resolve: {
        modules: ['node_modules', 'bower_components'],
        extensions: ['*', '.js', '.jsx']
    },
};

此配置结果与webpack-bundle-analyzer:

正如你所看到的，有一些重复的代码，一些在红色区域，一些在绿色区域。我想从 home 和 about 包中提取这个 js 代码到一个单独的包中。为了提取红色区域代码，即 lodash 库，我将这些行添加到 webpack 配置中:

new webpack.optimize.CommonsChunkPlugin({
    name: 'lodash',
    minChunks: function(module, count) {
        return module.context.indexOf('node_modules/lodash') >= 0;
    }
}),

但是它没有按预期工作，lodash 库代码仍然在 home 和 about 包中，而且 webpack 创建了一个名为 lodash 的包，它几乎是空的并且不包含任何 js 库。

知道如何解决这个问题吗？提取绿色代码怎么样？

最佳答案

您的问题是您在每个 .js/.jsx 文件中导入第三方库，而之前没有将其导入到公共(public)文件(通常称为 vendor.js)中。
如果您有这个导入所有依赖项的文件，并且将其作为条目包含到 CommonsChunkPlugin 中，则 webpack 不会在最终包中再次包含您的库 (home.js和about.js)。该技术在 webpack 文档中称为代码分割。

vendor.js(或适合您情况的名称)

import 'react';
import 'react-dom';
import 'lodash';
import 'semantic-ui-react';
//... all your npm packages

webpack.config.js

var webpack = require('webpack');
var path = require('path');

module.exports = {
    context: __dirname,
    entry: {
        vendor: './assets/js/vendor.js,
        home: './assets/js/home.jsx',
        about: './assets/js/about.jsx',
    },
    output: {
        path: path.resolve('./assets/bundles/'),
        filename: '[name].js',
    },
    plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            name: 'vendor',
            minChunks: Infinity
        }),
    ],

    //Rest of Your config ...
};

index.html

<body>
    <!-- AFTER YOUR HTML CODE -->

    <script type="text/javascript" src="/assets/bundles/vendor.js"></script>
    <script type="text/javascript" src="/assets/bundles/home.js"></script>
    <script type="text/javascript" src="/assets/bundles/about.js"></script>
</body>

<小时/>

检查 webpack 代码分割文档:

关于reactjs - 使用 WebPack CommonsChunkPlugin 提取重复的 javascript 代码，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45447873/

24

4

0

文章推荐： reactjs - 使用 shouldComponentUpdate 每秒重新渲染 block 组件

文章推荐： excel - 用于 PDF 导出、Excel 导出和打印的 ReactJS 组件

文章推荐： reactjs - 在React中递归渲染深层嵌套数据

java - 如何使用 Ruby、PHP 或 Java 解析/提取/提取 ASP.net 网站内容？
我正在做一个业余爱好项目，使用 Ruby、PHP 或 Java 来抓取 ASP.net 网站的内容。例如，如果网站 url“www.myaspnet.com/home.aspx”。我想从 home.a
r - 提取/之间的字符串
如果我有这些字符串： mystrings <- c("X2/D2/F4", "X10/D9/F4", "X3/D22/F4",
regex - 提取 | 之间的最后一个单词|
我有以下数据集 > head(names$SAMPLE_ID) [1] "Bacteria|Proteobacteria|Gammaproteobacteria|Pseudomonadales|Mor
grails - 提取: 'join'被忽略
设置: 3个域类A，B和C。A和B在插件中。 C在依赖于此插件的应用程序中。 class A{ B b static mapping = { b fetch: 'joi
JAVA StAX 提取
我不知道如何提取 XML 文件中的开始标记元素名称。我很接近〜意味着没有错误，我正在获取标签名称，但我正在获取标签名称加上信息。我得到的是: {http://www.publishing.org}au
regex - 提取 "?"之后的文本
我有一个字符串 x <- "Name of the Student? Michael Sneider" 我想从中提取“Michael Sneider”。我用过: str_extract_all(x,
Java - 提取 [* ... *] 之间的所有内容
我有一个如下所示的文本文件: [* content I want *] [ more content ] 我想读取该文件并能够提取我想要的内容。我能做的最好的事情如下，但它会返回 [更多内容] 请注意
Twig 提取 FOR 循环变量
假设我有一个项目集合 $collection = array( 'item1' => array( 'post' => $post, 'ca
java - 读取一个文本文件并写入多个文本文件以进行过滤/提取
我正在寻找一种过滤文本文件的方法。我有许多文件夹名称，其中包含许多文本文件，文本文件有几个没有人员，每个人员有 10 个群集/组(我在这里只显示了 3 个)。但是每个组/簇可能包含几个原语(我在这里展
python - Unicode 提取
我已经编写了一个从某个网页中提取网址的代码，我面临的问题是它不会以网页上相同的方式提取网址，我的意思是如果该网址位于某些网页中法语，它不会按原样提取它。我该如何解决这个问题？ import reque
c# - 提取 ZipFile
如何在 C# 中提取 ZipFile？(ZipFile 是包含文件和目录) 最佳答案为此使用工具。类似于 SharpZip .据我所知 - .NET 不支持开箱即用的 ZIP 文件。来自 here
c++ - 提取[]之间内容的正则表达式
我有一个表达: [training_width]:lofmimics 我要提取[]之间的内容，在上面的例子中我要 training_width 我试过以下方法: QRegularExpression
bash - 提取 "$@"中最后一个参数之前的参数
我正在尝试创建一个 Bash 脚本，该脚本将从命令行给出的最后一个参数提取到一个变量中以供其他地方使用。这是我正在处理的脚本: #!/bin/bash # compact - archive and
Javascript 提取 *.com
我正在寻找一个 JavaScript 函数/正则表达式来从 URI 中提取 *.com...(在客户端完成) 它应该适用于以下情况: siphone.com = siphone.com qwr.sip
python - BeautifulSoup 提取
关闭。这个问题需要更多focused .它目前不接受答案。想改进这个问题吗？更新问题，使其只关注一个问题 editing this post . 关闭 8 年前。 Improve this qu
Python JSON 提取
编辑:添加了实际的 JSON 对象和代码以供审查我有这种格式的 JSON(只是这种层次结构，假设 JSON 正常工作) {u'kind': u'calendar#events', u'default
python - 提取标签的内容
我已经编写了代码来使用 BeautifulSoup 提取一本书的 url 和标题来自页面。但它并没有在 > 之间提取惊人的 super 科学故事 1930 年 4 月这本书的名字。和标签。如何提
Java，提取$符号之间的单词
使用 Java，我想提取美元符号 $ 之间的单词。例如: String = " this is first attribute $color$. this is the second attribu
string - 提取.txt文件中以00开头的数字
您好，我正在尝试找到一种方法来确定字符串中的常量，然后提取该常量左侧的一定数量的字符。例如-我有一个 .txt 文件，在那个文件的某处有数字 00nnn 数字的例子是 00234 00765 ...
php操作（删除,提取,增加）zip文件方法详解
php读取zip文件(删除文件,提取文件,增加文件)实例从zip压缩文件中提取文件复制代码代码如下: <?php /* php 从zip压缩文件

首页

博学

6Ren·AI

商城

reactjs - 使用 WebPack CommonsChunkPlugin 提取重复的 javascript 代码