我最近被用来清理一个有45到50个个人.js个javascript文件的项目。我想知道减少所有装载尺寸的最佳方法是什么。只需将所有文件与npm或gulp连接成一个文件？安装一些模块加载器？的WebPack？
答案 0 :(得分：6)
如果你已经连接，缩小和uglifying，并且你不希望所有页面上的所有文件都由于整体捆绑而加载，那么你可能正在寻找类似Webpack的Commons Chunk Plugin之类的东西。
此插件遍历Webpack.config文件中定义的每个端点的依赖关系树，并确定所有页面都需要哪些模块。然后它将代码分成两个包，一个包含每个页面所需模块的“公共”包，您必须在每个页面上加载脚本标记：
<script src="commons.js" charset="utf-8"></script>
您在commons脚本标记之后放置的脚本标记中通常引用的每个页面的端点包：
<script src="specificpage.bundle.js" charset="utf-8"></script>
结果是单个页面不必加载只会在其他页面上使用的模块。
同样，这是一个Webpack插件。我不知道这个功能是否可以作为Gulp插件使用，因为它必须知道所有端点，以确定它们共有哪些依赖项。
答案 1 :(得分：1)
我将您重定向到非常好的https://github.com/thedaviddias/Front-End-Checklist
特别是以下建议：
JavaScript内联：高您没有任何内联的JavaScript代码 （与您的HTML代码混合）。
连接：高JavaScript文件 连接起来。
缩小：高级JavaScript文件缩小（您可以添加.min后缀）。
您可以使用包管理器完成此操作，例如gulp，grunt或webpack（对于最着名的包）。你只需要选择你喜欢的东西。
如果您考虑使用webpack，您可以从我非常简单（但理解）的启动器开始：https://github.com/dfa1234/snippets-starter
答案 2 :(得分：0)
你无能为力，基本上是：
您可以在yeoman上重新使用，而不是创建所有这些脚本。 Fountain，因此只需键入用于进行连接/缩小的程序代码，就会减少很多时间。
此外，如果您可以使用一些延迟加载（如RequireJS或某些框架支持延迟加载模块，如Angular），这将提高应用程序的性能
修改 如果您想获得更高的性能，可以在服务器中安装一些压缩工具，例如这个用于NodeJS https://www.npmjs.com/package/compression
答案 3 :(得分：0)
我个人认为，如果你有时间，最好的方法是阅读并理解项目的目的。然后计划一个适当的重构。你没有用连接来修复任何东西，这只是一个部署步骤。
你应该分析正在使用哪些技术，如果你想维护这些代码，从长远来看，将一个适当的重构放到一个更现代的堆栈中，也许你可以使用ES6，webpack，Babel进行种子项目。 ..并使用适当的模块化和依赖性解析创建一个适当的存储库。
一旦你拥有了它，减少负载就可以在构建时添加适当的工具（babel，webpack等）。
您想添加一些单元测试并继续正常工作：）