WebPack加载所有语义UI组件 [英] WebPack loads all semantic-ui components
问题描述
我目前正在研究一个项目，我需要配置 WebPack .在该项目中，我们还使用 ReactJS 和 Semantic-UI .这是 webpack.config.js :
I'm currently working on a project and i need to configure WebPack. In the project, we are also using ReactJS and Semantic-UI. Here is webpack.config.js :
var path = require("path");
var webpack = require('webpack');
var BundleTracker = require('webpack-bundle-tracker');
var BundleAnalyzer = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
context: __dirname,
entry: {
react: ["react", "react-dom"],
home: './assets/js/index.jsx',
},
output: {
path: path.resolve('./assets/bundles/'),
filename: "[name].js",
},
plugins: [
new BundleTracker({filename: './webpack-stats.json'}),
new webpack.optimize.CommonsChunkPlugin({
names: ["react"],
}),
new webpack.optimize.CommonsChunkPlugin({
name: "home",
chunks: ['home'],
filename: "[name]-[hash].js",
}),
new BundleAnalyzer(),
],
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
options: { presets: ["es2015", "react"] }
},
],
},
resolve: {
modules: ['node_modules', 'bower_components'],
extensions: ['*', '.js', '.jsx']
},
};
在 assets/js/index.jsx 文件中，我们只有以下导入语句:
In assets/js/index.jsx file, we just have these import statements :
import React from "react";
import ReactDOM from 'react-dom';
import { Button } from 'semantic-ui-react';
通过运行webpack命令，它输出两个文件:
By running webpack command, it outputs two files:
- react.js:779 KB
- home- [some_hash_number] .js:1.5 MB
使用 webpack-bundle-analyzer 插件，我们得到以下信息:
Using webpack-bundle-analyzer plugin, we get this:
如您在图片中看到的红色矩形所示，虽然我刚刚导入了Button组件，但所有 semantic-ui react组件都捆绑在 home.js 文件中来自 assets/js/index.js 文件中的内容，这就是输出文件变得太大的原因.
As you see the red rectangle in the picture, all of the semantic-ui react components are bundled into home.js file although i just imported Button component from in assets/js/index.js file and that's why the output file gets too big.
有什么方法可以捆绑所需的组件吗?
Is there any way to just bundle needed components?
更新
阅读 @Alexander Fedyashov 的答案，我安装了 babel-plugin-lodash 并更新了 webpack .config.js :
var path = require("path");
var webpack = require('webpack');
var BundleTracker = require('webpack-bundle-tracker');
var BundleAnalyzer = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
context: __dirname,
entry: {
react: ["react", "react-dom"],
home: './assets/js/index.jsx',
},
output: {
path: path.resolve('./assets/bundles/'),
filename: "[name].js",
},
plugins: [
new BundleTracker({filename: './webpack-stats.json'}),
new webpack.optimize.CommonsChunkPlugin({
name: "react",
}),
new webpack.optimize.CommonsChunkPlugin({
name: "home",
chunks: ['home'],
filename: "[name]-[hash].js",
}),
new BundleAnalyzer(),
],
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
options: {
plugins: ["lodash", { "id": ["lodash", "semantic-ui-react"] }],
presets: ["es2015", "react"],
}
},
],
},
resolve: {
modules: ['node_modules', 'bower_components'],
extensions: ['*', '.js', '.jsx']
},
};
现在一切正常，仅加载所需的组件.
Now everything is working and only needed components are loaded.
推荐答案
它应该由Webpack拆分，但实际上摇树是行不通的.您可以按照SUIR 文档中所述使用babel-plugin-lodash.
It should be splitted by Webpack, but in fact tree shaking doesn't work. You can use babel-plugin-lodash as described in SUIR docs.
请记住，SUIR的某些组件是相互依赖的，即:
You should keep in mind, that some of SUIR's components are dependent from each other, i.e.:
-
Button需要Icon和Label -
Label需要Icon和Image -
Image需要Dimmer -
Dimmer需要Portal.
ButtonrequiresIconandLabelLabelrequiresIconandImageImagerequiresDimmerDimmerrequiresPortal.
但是，如果您不使用插件，它将允许剥离Rail，Reveal和Advertisement之类的组件.
However, plugin will allow to strip such components as Rail, Reveal and Advertisement if you don't use them.
这篇关于WebPack加载所有语义UI组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
