[英]Brunch: separating vendor and app javascript
我從我們的項目供應商和應用程序中制作了兩個javascript包。 我按照文檔建議的方式執行此操作,如我的brunch-config.js的此片段中所示:
files: {
javascripts: {
joinTo: {
'js/vendor.js': /^(?!source\/)/,
'js/app.js': /^source\//
},
entryPoints: {
'source/scripts/app.jsx': 'js/app.js'
}
}
}
我最終得到了vendor.js和app.js. 但請查看文件大小:
注意app.js如何比vendor.js大! 這種大尺寸使得觀看速度比需要的慢。 在檢查app.js的內容時,它似乎包含了lodash,React和其他庫,我希望它可以從vendor.js獲得。 並且vendor.js似乎包含相同的庫,我期望它們。
我的問題: 為什么app.js中存在庫? 為什么app.js不會從vendor.js引用它們?
我可能錯過了一些配置。 這是我的完整brunch-config.js供您檢查:
module.exports = {
files: {
javascripts: {
joinTo: {
'js/vendor.js': /^(?!source\/)/,
'js/app.js': /^source\//
},
entryPoints: {
'source/scripts/app.jsx': 'js/app.js'
}
},
stylesheets: {joinTo: 'css/core.css'},
},
paths: {
watched: ['source']
},
modules: {
autoRequire: {
'js/app.js': ['source/scripts/app']
}
},
plugins: {
babel: {presets: ['latest', 'react']},
assetsmanager: {
copyTo: {
'assets': ['source/resources/*']
}
},
static: {
processors: [
require('html-brunch-static')({
processors: [
require('pug-brunch-static')({
fileMatch: 'source/views/home.pug',
fileTransform: (filename) => {
filename = filename.replace(/\.pug$/, '.html');
filename = filename.replace('views/', '');
return filename;
}
})
]
})
]
}
},
server: {
run: true,
port: 9005
}
};
在HTML中我需要這樣的文件:
<script type="text/javascript" src="js/vendor.js" defer></script>
<script type="text/javascript" src="js/app.js" defer></script>
我嘗試設置訂單對象,但無濟於事:
files:
javascripts: {
joinTo: {
'js/vendor.js': /^(?!source\/)/,
'js/app.js': /^source\//
},
entryPoints: {
'source/scripts/app.jsx': 'js/app.js'
},
order: {
before: /^(?!source)/,
after: /^source\//
}
}
}
這是我的package.json:
{
"version": "0.0.1",
"devDependencies": {
"assetsmanager-brunch": "^1.8.1",
"babel-brunch": "^6.1.1",
"babel-plugin-add-module-exports": "^0.2.1",
"babel-plugin-rewire": "^1.0.0-rc-5",
"babel-plugin-transform-es2015-modules-commonjs": "^6.10.3",
"babel-plugin-transform-object-rest-spread": "^6.8.0",
"babel-preset-react": "^6.3.13",
"babel-register": "^6.11.6",
"browser-sync-brunch": "^0.0.9",
"brunch": "^2.10.9",
"brunch-static": "^1.2.1",
"chai": "^3.5.0",
"es6-promise": "^3.2.1",
"eslint-plugin-react": "^5.1.1",
"expect": "^1.20.2",
"html-brunch-static": "^1.3.2",
"jquery": "~2.1.4",
"jquery-mousewheel": "^3.1.13",
"mocha": "^3.0.0",
"nib": "^1.1.0",
"nock": "^8.0.0",
"oboe": "~2.1.2",
"paper": "0.9.25",
"path": "^0.12.7",
"pug": "^2.0.0-beta10",
"pug-brunch-static": "^2.0.1",
"react": "^15.2.1",
"react-dom": "^15.2.1",
"react-redux": "^4.4.5",
"redux": "^3.5.2",
"redux-logger": "^2.6.1",
"redux-mock-store": "^1.1.2",
"redux-promise": "^0.5.3",
"redux-thunk": "^2.1.0",
"reselect": "^2.5.3",
"spectrum-colorpicker": "~1.8.0",
"stylus-brunch": "^2.10.0",
"uglify-js-brunch": "^2.10.0",
"unibabel": "~2.1.0",
"when": "~3.4.5"
},
"dependencies": {
"jwt-decode": "^2.1.0",
"lodash": "^4.17.4",
"postal": "^2.0.5",
"rc-tree": "^1.3.9"
},
"scripts": {
"test": "mocha --compilers js:babel-register"
}
}
另一個想法,這可能與使用require
而不是import
嗎?
如果我能提供其他任何有用的信息,請告訴我們。 謝謝你的幫助。
UPDATE
這是我的文件夾結構,簡化:
node_modules
source
|---resources
|---scripts
|---styles
|---views
這是brunch build
產生的輸出結構:
assets
css
|---core.css
js
|---app.js
|---app.js.map
|---vendor.js
|---vendor.js.map
home.html
自己調試一下! MVCE可用。 請遵循以下說明:
npm install
brunch build
(確保它使用npm install brunch -g
全局npm install brunch -g
) public/js
中app.js
和vendor.js
的大小。 它們應分別為744 KB和737 KB。 檢查app.js的內容並記下庫的內容。 我的files.javascripts.joinTo['js/app.js']
如何用regex /^source\\//
包括這個? 問題是由joinTo
和entryPoints
的混合引起的。 我假設使用您的配置,您首先在app.js
和vendor.js
拆分代碼,但然后app.js
被entryPoints
的輸出覆蓋。
為了解決這個問題,您必須選擇以下選項之一:
選項1
刪除entryPoints
聲明。 這將只是沿着提供的RegEx拆分您的代碼。
選項2
刪除joinTo
聲明並將entryPoints
更改為:
entryPoints: {
'source/scripts/app.jsx': {
'js/vendor.js': /^(?!source\/)/,
'js/app.js': /^source\//
},
}
結論
在這種情況下,兩個選項的輸出是相同的。 但是使用entryPoints
可以分析代碼,只需要捆綁所需的模塊。 因為沒有任何不必要的模塊,所以大小是相同的。 有關更多信息,請參閱此問題 。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.