Webpack包含bundle.js中未使用的库
Webpack includes unused library in bundle.js
我不明白为什么。。。
包括100K字节的未使用库:
/*!
* The buffer module from node.js, for the browser.
*
* @author Feross Aboukhadijeh <feross@feross.org> <http://feross.org>
* @license MIT
*/
...
...
我的webpack.deploy.config.js
'use strict';
/* eslint-env node */
const webpack = require('webpack');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const config = {
addVendor: function (name, path) {
this.resolve.alias[name] = path;
this.module.noParse.push(new RegExp(`^${name}$`));
},
node: {
Buffer: false,
global: false,
process: false,
setImmediate: false
},
entry: {
app: [
'./src/main.jsx'
],
vendors: [
'jquery',
'semantic',
'semantic.css',
'react',
'react-dom'
]
},
resolve: { alias: {} },
output: {
path: `${__dirname}/build`,
publicPath: '/',
filename: 'bundle.js'
},
plugins: [
new webpack.optimize.OccurenceOrderPlugin(),
new CopyWebpackPlugin([{ from: './src/static', to: './' }]),
new webpack.optimize.CommonsChunkPlugin('app', null, false),
new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors.js'),
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery'
})
],
module: {
noParse: [],
loaders: [
{
test: /'.(jsx)?$/,
exclude: /node_modules/,
loader: 'babel'
},
{
test: /'.(js)$/,
loader: 'babel',
exclude: [/node_modules/, /bower_components/]
},
{
test: /'.(css)$/,
loader: 'style!css'
},
{
test: /'.(scss)$/,
loader: 'style!css!sass'
},
{
test: /'.(less)$/,
loader: 'style!css!less'
},
{
test: /'.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000'
}
]
}
};
config.addVendor('jquery', `${__dirname}/bower_components/jquery/dist/jquery.min.js`);
config.addVendor('semantic', `${__dirname}/bower_components/semantic/dist/semantic.min.js`);
config.addVendor('semantic.css', `${__dirname}/bower_components/semantic/dist/semantic.min.css`);
config.addVendor('react', `${__dirname}/bower_components/react/react.min.js`);
config.addVendor('react-dom', `${__dirname}/bower_components/react/react-dom.min.js`);
module.exports = config;
我将es6
与babel
和react
一起使用,代码运行良好,只是试图缩小包。
还使用了使用http
和https
的交叉库(节点/浏览器),但我认为这不是问题所在。
从webpack1迁移到webpack2时,我遇到了类似的问题。束大小从125kb增加到164kb(最小化)。
看起来主要部分采用了缓冲库,该缓冲库可能来自css加载器,并添加了源映射支持。
我打开了一期https://github.com/webpack-contrib/style-loader/issues/194看起来简单的解决方法是将CCD_ 7添加到webpack配置中。更多信息,请访问:https://webpack.js.org/configuration/node/
相关文章:
- 未使用angular JS清理日期选择器
- 未使用.removeLayer()删除Mapbox JS标记
- Webpack包含bundle.js中未使用的库
- Magic Line在使用键盘上下移动时未使用fullPage.js进行更新
- 未使用传递给Soundmanager(通过Soundcloud JS SDK)的选项
- 未使用JS闭包将变量传递给onClick函数
- 窗口未使用对等.js定义
- 将 JQuery 与 Node 一起使用.js“ReferenceError: $ 未定义”
- 客户端未使用 Socket.io 和 Node.js 实时更新
- 表数据未使用 KO.js MVC 显示为 HTML
- 纸张.js鼠标事件未使用画布转换进行转换
- 减少cytoscape js布局的未使用空间/箭头长度
- 使用Sharepoint列表值时未显示JS警报
- Node.js中未使用需求的性能影响
- Vue.js中未使用navigator.onLine更新计算属性
- 如果Safari中未使用deployjava.js安装Java,则获取JRE版本
- Sinon.js fakeServer未使用response方法触发回调
- 检测并标记未使用的JS变量
- 使用JS变量对PHP数组进行索引(预加载):;未捕获参考错误”;即使函数不是't调用
- 是否有一种方法可以删除JS库中未使用的行