支持 vendor 的配置 #370
Comments
|
直接用externals弄出来可以吗？ |
|
@Restry externals 和 chunk 是两个概念 |
|
+1 |
externals 肯定是有效的，有用例。 |
|
@MinJieLiu vendor 的配置方式有建议的吗？可以提个 PR 试试。 |
我的思路是这样：
如： {
"entry": {
"app": "./src/index.js",
"vendors": [
"classnames",
"moment"
]
}
}没实践过多页应用，只有单页的思路😂
|
哪里有说？ |
|
https://webpack.js.org/configuration/entry-context/ |
这样写可以不需要提前知道你引用了那些第三方库吧 |
|
确实很需要提取公共库 |
|
大家可以参考一下我提取公共模块的实现 antd 模块的单独提取可以参考这个代码： // webpack.config.js
const webpack = require('webpack')
module.exports = function wp(webpackConfig, env) {
// 对roadhog默认配置进行操作，比如：
if (env === 'production') {
// 上线环境使用分包打包方式
webpackConfig.entry = {
index: './src/index.js',
vendor: [
'moment',
'mockjs',
'lodash',
'react',
'react-dom',
'react-helmet',
],
antd: [
'antd/lib/button',
'antd/lib/icon',
'antd/lib/table',
'antd/lib/date-picker',
'antd/lib/form',
'antd/lib/modal',
'antd/lib/grid',
'antd/lib/input',
],
}
webpackConfig.plugins.push(new webpack.optimize.CommonsChunkPlugin({
name: ['vendor', 'antd'],
minChunks: Infinity,
}))
}
return webpackConfig
}上面是根目录下 下面是一些注意事项：
// src/index.js
import 'babel-polyfill'
import dva from 'dva'
import createHistory from 'history/createBrowserHistory'
import createLoading from 'dva-loading'
import { message } from 'antd'
import moment from 'moment'
import 'moment/locale/zh-cn'
import './index.less'
import './themes/index.less'
moment.locale('zh-cn')
const ERROR_MSG_DURATION = 3 // 3 秒
// 1. Initialize
const app = dva({
history: createHistory(),
onError(error) {
console.error(error)
message.error(error.message, ERROR_MSG_DURATION)
},
})
// 2. Plugins
app.use(createLoading({ effects: true }))
// 3. Model
app.model(require('./models/app'))
app.model(require('./models/login'))
app.model(require('./models/page'))
app.model(require('./models/utils'))
app.model(require('./models/query'))
// 4. Router
app.router(require('./router'))
// 5. Start
app.start('#root')不需要引用 src
// index.ejs
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
</head>
<body>
<div id="root"></div>
</body>
</html>
|
|
+1 |
|
继续跟进一下这个issue，提取vendor公共模块·的功能实现了没有？如果实现了的话，请问有用例吗？ |
|
+1 |
|
@imshenyz @hopperhuang 参考一下上面我更新了的答案 有问题再@我 |
|
+1 |
|
@Runtu4378 你好，我按照你这个配置完了之后，就出现这个问题
|
|
在 const packagejson = require('./package.json');
// 省略其它配置
entry: {
index:'./src/index.js',
vendor:Object.keys(packagejson.dependencies).filter((v)=>{
if(v !=="@antv/data-set"){
return v
}
})
},
commons:[{
name: 'vendor',
filename: '[name].js'
}], |
|
Failed to minify the bundle. Error: vendor.js from UglifyJs |
在大多数情况下，我们需要安装一些第三方库，比如
moment、classnames、react-helmet等。目前，每个异步模块只要 import了这些库，就会单独打包到这些模块中。就会导致每个模块的 js 体积过大，极端情况一个简单的模块的体积都可以超过 index.js😱。
所以
CommonsChunkPlugin提取公共的库到vendor.js中还是很有必要的。测试一些常用的库：
vendor.js 的体积是
gzip: 81.64kbThe text was updated successfully, but these errors were encountered: