Currently we are bundling our backbone application into a single script.js file, using r.js (require.js optimizer)
Below is the build configuration file we are using for it
({
baseUrl: './',
mainConfigFile: 'require-config.js',
name: 'require-config',
out: 'scripts.js',
optimize: "uglify2",
optimizeCss: "standard",
removeCombined: true,
preserveLicenseComments: false,
include: "lib/require.min"
})
This makes script.js of 11.5 MB, which causes 45 - 60 seconds on the client side to download.
So we need to create multiple small bundles for the application
Solutions I had tried to achieve this:
Adding modules section in build configuration
Adding modules section in require-config file
Adding bundles section in require-config file
None of these solution gave the desired output, of breaking the application into multiple modules
Is there any better way to bundle javascript applications (which uses require.js) into multiple small modules
Related
We have a Sencha ExtJS7 based classic application using a package that requires a lot of js files to loaded seperately (read can not be bundled). So we are loading them via package.json js config
"js": [
{
"path": "${package.dir}/resources/ace-builds-master/src-min-noconflict/ace.js"
},
{
"path": "${package.dir}/resources/ace-builds-master/src-min-noconflict/theme-monokai.js"
},
<snipped................>
So there are many files that are to be loaded seperately and should not be bundled into one
When production/testing build these files are loaded before app functions.
Is there a way to load these files either when a panel that requires them are added to screen or at defer them after app is loaded and starts working
First, if you want to do this, you can't bundle the javascript into your app; all bundled code will get loaded as part of the bootstrapping of the app.
Second, there are vanilla JS ways to load more scripting code, but the way to do it with ExtJS is Ext.Loader#loadScript
Another way to do it, if these are ExtJS packages (and not arbitrary NPM packages) would be to declare the packages in the 'uses' section of the app.json, which would allow you to load them dynamically with Ext.Package#load
I have a large SPA which takes a second or two to load completely. What can I use to figure out what is causing my SPA to have a slow first load?
This is a video of the issue.
I have removed all calls to APIs. I've tried tools such as gatsby-plugin-webpack-bundle-analyser-v2, but I don't believe it's accurate. On gatsby build, it shows a bundle size of 10mb where the actual bundle .js file is only 2.3mb.
I can't figure out how to export a webpack-stats file to use https://chrisbateman.github.io/webpack-visualizer/.
If you want to export a stat file with gatsby-plugin-webpack-bundle-analyser-v2, you need to pass this option :
gatsby-config.js
{
resolve: 'gatsby-plugin-webpack-bundle-analyser-v2',
options: {
generateStatsFile: true,
},
},
It will generate JSON file named stats.json in your /public dir.
Hope this helps.
For the context: I'm developing my own product using Symfony on the back-end and react/react-router on the front-end, which is tied together by Webpack. I'm planning to divide my app into "extensions", so I would have "core" bundle and multiple different extending bundles around it (which would be sets of additional features for my product).
Now, I would like for my front-end to be as extensible as my back-end. I would like to be able to add new React components with my extending bundles to the existing "core" set of components in my "CoreBundle".
However, it seems like the Webpack is encapsulating everything too tightly to be able to produce that kind of a plugin system. Is it possible to have multiple bundles that would have separate Webpack configurations, but their JavaScript would be interconnected in a way that would allow for developing of a plugin system? The goal is being able to develop JS of one Bundle independently but at the same time being able to use some already compiled JS resources from another Bundle in the process.
I think you should be able to achieve this using the DllPlugin and the DllReferencePlugin
The DllPlugin is used in a separate webpack config to create a dll
only bundle. It also creates a manifest.json file which is used by the
DllReferencePlugin to map dependencies.
Refer to the detailed documentation at
https://webpack.js.org/plugins/dll-plugin/
In my case, I use this to combine all vendor libraries (React, Flux, etc) in one build and then use that as a reference in my Other Webpack Config which bundles all my React components etc. but references React and other libraries using the DllReferencePlugin.
My webpack.dll.js config file:
var path = require("path");
var webpack = require("webpack");
module.exports = {
entry: {
libs: [path.join(__dirname, "common", "lib.js")]
},
output: {
path: path.join(__dirname, "dist", "dll"),
filename: "[name].dll.js",
library: "[name]"
},
plugins: [
new webpack.DllPlugin({
path: path.join(__dirname, "dll", "[name]-manifest.json"),
name: "[name]",
context: path.resolve(__dirname, "common")
}),
]
};
And then in my main webpack.config.js, I use the reference plugin.
new webpack.DllReferencePlugin({
context: path.resolve(__dirname, "common"),
manifest:require('./dll/libs-manifest.json')
})
Depending upon how you want to split your code, you can create multiple Dlls, each with a separate webpack config as per your requirements. And then refer the dll's as per your requirements in different other webpack bundles.
Say I have multiple components that require the same SCSS file. When I am using webpack ExtractTextPlugin plugin I get output file with multiple duplications of the contents of this file. Is there a way to prevent extracting files that were already extracted in the output file? 👍 1
I think that you need the CommonsChunkPlugin
"The CommonsChunkPlugin is an opt-in feature that creates a separate file (known as a chunk), consisting of common modules shared between multiple entry points. By separating common modules from bundles, the resulting chunked file can be loaded once initially, and stored in cache for later use. This results in pagespeed optimizations as the browser can quickly serve the shared code from cache, rather than being forced to load a larger bundle whenever a new page is visited."
...
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: "commons",
filename: "commons.min.js",
minChunks: 2
})
]
...
Having all kinds of problems getting Sails to work with RequireJS, mainly because I can't find any definitive source on the best way to do this. There are several posts out there that discuss this, but they are older and all do things differently. Would really love to see the Creators enlighten the community on the proper way to do this given the changes to the Sails application structure, linker process etc. in the latter versions (.0.9.9, ,0.10)
So, first question would be...if I am planning on using an AMD/RequireJS + Backbone approach for my client-side code, and want to use the R.js Optimizer in grunt to build my production JS file and resolve all the nested dependencies automatically (rather than have to list them out manually), should I not create the application with the --linker option and manually manage the grunt build process myself?
Also, where in the directory structure should the "vendor" directory be placed that contains all the dependent JS libs like Underscore, jQuery, Backbone etc. reside?
I decided this problem:
Install the plugin for grunt-requirejs
wrote config to run build in a folder /tasks/config/requirejs.js
Example:
module.exports = function(grunt) {
grunt.config.set('requirejs', {
dev: {
options: {
baseUrl: "assets/",
name: 'main',
optimize: "uglify2",//'none',//"uglify2",
//wrap: true,
paths: {
// Major libraries
jquery: '../vendor/jquery',
underscore: '../vendor/underscore',
backbone: '../vendor/backbone',
// Require.js plugins
},
removeCombined: true,
inlineText: true,
useStrict: true,
out: "build/main.js",
waitSeconds: 200
},
}
});
grunt.loadNpmTasks('grunt-contrib-requirejs');
};
added to autostart in tasks/register/compileAssets.js
Example:
module.exports = function (grunt) {
grunt.registerTask('compileAssets', [
'clean:dev',
'jst:dev',
'less:dev',
'copy:dev',
'coffee:dev',
'requirejs:dev'
]);
};
You also have to adjust just grunt at yourself and do not be afraid to change anything. At design time, better to store scripts in the Assets folder because it is convenient.
For others having the same problem, a quick but only partial fix is to disable the script injection by removing the following from layout.ejs:
<!-- SCRIPTS -->
<!-- SCRIPTS END -->
Then just place direct links to your require.js file:
<script src="/linker/js/components/requirejs/require.js"></script>
I say this is only a partial fix because the GruntFile will need need to implement a require task in order to concatenate the files correctly.