如何在使用需要第三方内容时保持合理的Browserify软件包大小（如果重要的话，通过grunt） [英] How to keep Browserify bundle size sensible when using requires for thirdparty stuff (via grunt if it matters)

问题描述

我试图捆绑自己的代码（A），该代码依次使用2个第三方组件（B和C），其中C也需要B。据我所知，所有内容都是使用CommonJS节点样式模块编写的。 / p>

A捆绑出售时，价格为60K。

B单独包含并假定为全局，通过在构建步骤中进行一些肮脏的替换，使之工作正常，我将其替换为与global.B的require（ B）。B

C是是什么引起了我的问题，但是它的大小只有8K，当我尝试将其与A捆绑在一起时，由于我认为它的依赖程度很高，我的捆绑包会跳升到600K +？

这是不可接受的，但是我不知道如何缩小它，因为我不知道它的引入到底是什么（或更重要的是，我可以排除它以使其继续工作）。我可以尝试用这种排骨来代替，但我不知道这样做是安全还是明智的方法。

我如何捆绑C up，只有我的捆绑包输出为68.5K（两个代码块的总大小为60k + 8.5k），并且仍然可以正常工作吗？

我是新用户可以连接到节点并进行浏览器化，但是我已经花了整整一个星期的时间，可以这样说，在举起手来之前，我已经给了它很好的防刺能力。

信息是否重要：

• 它需要运行服务器端和客户端


• B实际上是ReactJS


• C实际上是React Router组件


• 通过ReactJS.net使用Windows和C＃...嘿...等等...回来... 风滚草

解决方案

如果您创建了包含 all 应用程序依赖项（B + C）的外部捆绑软件，并在捆绑应用程序自己的代码（A）时将这些模块声明为外部模块，那么事情应该在您

我不知道执行此操作的grunt-browserify配置方法，但以下内容显示了如何在某些示例gulp任务中直接使用browserify，因此捆绑软件的创建应该是可重用的：

  var browserify = require（'browserify'）
 var gulp = require（' gulp'）
 var source = require（'vinyl-source-stream'）
 
 gulp.task（'js-deps'，function（）{
 var b = browserify （）
 b.require（'react'）
 b.require（'react-router-component'）
 b.transform（'envify'）
 
返回b.bundle（）
 .pipe（source（'deps.js'））
 .pipe（gulp.dest（'./ build'））
}）
 
 gulp.task（'bundle-js'，function（）{
 var b = browserify（'./ lib / app.js'）
 b.external（'react'）
 b.external（'react-router-component'）
 
 return b.bundle（）
 .pipe（source（'app.js'））
。 pipe（gulp.dest（'./ build'））
}）
  

I'm trying to bundle up my own code (A) which in turn uses 2 third party components (B and C) where C also needs B. Everything as far as I know is written using CommonJS node style modules.

A on its own when bundled comes out at 60K.

B is included separately and assumed to be global, I've got this working just fine by doing a dirty bit of a replace in my build step that swaps out require("B") with global.B

C is whats causing me issues though, its meant to be "just 8K" in size yet when I try bundling it up with A my bundle jumps up to 600K+ as I assume its pulling in dependancies galore?

This is not acceptable but I don't know how to get it any smaller as I don't know what the heck its pulling in (or more importantly what I can exclude to make it still work). I could try a binary chop with the exculsions but I'd don't know if that is a safe way or even sensible way to do it.

How can I bundle C up and only have my bundle come out at 68.5K (total size of both chunks of code 60k + 8.5k) and of course still work?

I'm new to node and browserify but I've been hammering on this for over a week so fair to say I've given it a good stab before putting my hand up.

Additional info if it matters:

• it needs to run server-side and client-side
• B is actually ReactJS
• C is actually React Router Component
• Using windows and c# via ReactJS.net...hey...wait...come back...tumbleweed

解决方案

If you create an external bundle containing all your app's dependencies (B + C) and declare those modules as external when bundling your app's own code (A), then things should work as you expect.

I don't know the grunt-browserify config incantations for doing this, but the following show how you'd use browserify directly in some example gulp tasks, so the bundle creation should be reusable:

var browserify = require('browserify')
var gulp = require('gulp')
var source = require('vinyl-source-stream')

gulp.task('js-deps', function() {
  var b = browserify()
  b.require('react')
  b.require('react-router-component')
  b.transform('envify')

  return b.bundle()
    .pipe(source('deps.js'))
    .pipe(gulp.dest('./build'))
})

gulp.task('bundle-js', function() {
  var b = browserify('./lib/app.js')
  b.external('react')
  b.external('react-router-component')

  return b.bundle()
    .pipe(source('app.js'))
    .pipe(gulp.dest('./build'))
})

这篇关于如何在使用需要第三方内容时保持合理的Browserify软件包大小（如果重要的话，通过grunt）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！