早午餐：分离供应商和应用程序javascript [英] Brunch: separating vendor and app javascript

查看：98
本文介绍了早午餐：分离供应商和应用程序javascript的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我从我们的项目供应商和应用程序中制作了两个javascript包。我按照



注意app.js如何大于vendor.js！这种大尺寸使得观看速度比需要的慢。在检查app.js的内容时，它似乎包含了lodash，React和其他库，我希望它可以从vendor.js获得。并且vendor.js似乎包含相同的库，我期待。



我的问题：为什么app.js中存在库？为什么app.js不会从vendor.js引用它们？



我可能错过了一些配置。这是我的完整brunch-config.js供您检查：

  module.exports = {
 
文件：{
 javascripts：{
 joinTo：{
'js / vendor.js'：/ ^（?! source \ /）/，
'js / app。 js'：/ ^ source \ // 
}，
 entryPoints：{
'source / scripts / app.jsx'：'js / app.js'
} 
}，
样式表：{joinTo：'css / core.css'}，
}，
 
路径：{
观看：['source' ] 
}，
 
模块：{
 autoRequire：{
'js / app.js'：['source / scripts / app'] 
 } 
}，
 
插件：{
 babel：{presets：['latest'，'react']}，
 assetsmanager：{
 copyTo ：{
'资产'：['source / resources / *'] 
} 
}，
静态：{
处理器：[
 require（ 'html-brunch-static'）（{
 processor：[
 require（哈巴狗早午餐静电）（{
 fileMatch：‘源/视图/ home.pug’，
 fileTransform：（文件名）=> {
 filename = filename.replace（/\ .pug $ /，'。html'）; 
 filename = filename.replace（'views /'，''）; 
返回文件名; 
} 
}）
] 
}）
] 
} 
}，
 
服务器：{
 run：true，
 port：9005 
} 
 
};

在HTML中我需要这样的文件：

 < script type =text / javascriptsrc =js / vendor.jsdefer>< / script> 
< script type =text / javascriptsrc =js / app.jsdefer>< / script>

我尝试设置订单对象，但无济于事：

 文件：
 javascripts：{
 joinTo：{
'js / vendor.js'：/ ^（?! source \\ \\ /）/，
'js / app.js'：/ ^ source \ // 
}，
 entryPoints：{
'source / scripts / app.jsx' ：'js / app.js'
}，
订单：{
之前：/ ^（?! source）/，
之后：/ ^ 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，
 巴别塔寄存器：^ 6.11.6，
browser-sync-brunch：^ 0.0.9，
早午餐：^ 2.10.9，
早午餐 - 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，
纸：0.9.25 ，
路径：^ 0.12.7，
pug：^ 2.0.0-beta10，
pug-brunch-static：^ 2.0.1 ，
反应：^ 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，
重新选择：^ 2.5.3 ，
spectrum-colorpicker：~1.8.0，
stylus-brunch：^ 2.10.0，
uglify-j s-brunch：^ 2.10.0，
unibabel：~2.1.0，
when：~3.4.5
}，
依赖：{
jwt-decode：^ 2.1.0，
lodash：^ 4.17.4，
邮政：^ 2.0。 5，
rc-tree：^ 1.3.9
}，
脚本：{
test：mocha --compilers js：babel -register
} 
}

另一个想法，这可能需要做使用 require 而不是 import ？



如果有的话我能提供的其他任何有用的信息请告诉我。感谢您的帮助。



更新



这是我的文件夹结构，简化：

  node_modules 
 source 
 | --- resources 
 | --- scripts 
 | --- styles 
 | --- views

这是产生的输出结构早午餐：

 资产
 css 
 | ---核心。 css 
 js 
 | --- app.js 
 | --- app.js.map 
 | --- vendor.js 
 | ---供应商.js.map 
 home.html

自己调试一下！ MVCE可用。请按照以下说明操作：


  1. 克隆此示例存储库

  2. npm install

  3. brunch build （确保全局安装 npm install brunch -g ）

  4. 在 public / js <中比较 app.js 和 vendor.js 的大小/ code>。它们应分别为744 KB和737 KB。检查app.js的内容并记下库的内容。我的 files.javascripts.joinTo ['js / app.js'] 如何使用regex / ^ source\ // ？


解决方案

问题是由<$ c $混合引起的c> 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 分析代码并且只需要捆绑所需的模块。因为没有任何不必要的模块，所以大小是相同的。有关详细信息，请参见此问题。


I have made two bundles of javascript from our project- vendor and app. I do this in the manner suggested by the documentation, as seen in this snippet from my brunch-config.js:

files: {
  javascripts: {
    joinTo: {
      'js/vendor.js': /^(?!source\/)/,
      'js/app.js': /^source\//
    },
    entryPoints: {
      'source/scripts/app.jsx': 'js/app.js'
    }
  }
}

And I end up with a vendor.js and an app.js. But check out the file sizes:

Note how app.js is larger than vendor.js! This large size makes watching slower than it needs to be. Upon inspecting the contents of app.js, it seemed to contain lodash, React, and other libraries, which I expected it to get from vendor.js. And vendor.js seems to contain the same libraries, which I do expect.

My question: Why are the libraries present in app.js? Why does app.js not reference them from vendor.js?

It is possible I missing some piece of configuration. Here is my full brunch-config.js for your examination:

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
  }

};

and in HTML I require these files like this:

<script type="text/javascript" src="js/vendor.js" defer></script>
<script type="text/javascript" src="js/app.js" defer></script>

I tried setting the order object, but to no avail:

files:
  javascripts: {
    joinTo: {
      'js/vendor.js': /^(?!source\/)/,
      'js/app.js': /^source\//
    },
    entryPoints: {
      'source/scripts/app.jsx': 'js/app.js'
    },
    order: {
      before: /^(?!source)/,
      after: /^source\//
    }
  }
}

Here's my 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"
  }
}

Another thought, could this have to do with using require instead of import?

If there's any other information I can provide that would be helpful please let me know. Thanks for your help.

UPDATE

Here's my folder structure, simplified:

node_modules
source
|---resources
|---scripts
|---styles
|---views

Here's the output structure produced by brunch build:

assets
css
|---core.css
js
|---app.js
|---app.js.map
|---vendor.js
|---vendor.js.map
home.html

Debug it for yourself! MVCE available. Follow these instructions:

  1. Clone this example repository
  2. npm install
  3. brunch build (make sure it is installed globally with npm install brunch -g)
  4. Compare the sizes of app.js and vendor.js in public/js. They should be 744 KB and 737 KB respectively. Examine the contents of app.js and note the library stuff. How is my files.javascripts.joinTo['js/app.js'] including this with regex /^source\//?

解决方案

The problem is caused by the mixture of joinTo and entryPoints. I assume that with your config, you first split your code in app.js and vendor.js but then the app.js gets overridden by the output of the entryPoints.

In order to solve it, you have to choose one of the options:

Option 1

Remove the entryPoints declaration. This will just split your code along the provided RegEx.

Option 2

Remove the joinTo declaration and change the entryPoints to:

    entryPoints: {
      'source/scripts/app.jsx': {
        'js/vendor.js': /^(?!source\/)/,
        'js/app.js': /^source\//
      },
    }

Conclusion

In this very case, the output of both options is the same. But with entryPoints the code get's analyzed and only needed modules get bundled. Because there aren't any unnecessary modules, the size is the same. See this issue for more information.

这篇关于早午餐：分离供应商和应用程序javascript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆