Build Performance
This guide contains some useful tips for improving build/compilation performance. GeneralThe following best practices should help, whether you're running build scripts in development or production. Stay Up to DateUse the latest webpack version. We are always making performance improvements. The latest recommended version of webpack is: Staying up-to-date with Node.js can also help with performance
SplitChunksPlugin | webpack
Originally, chunks (and modules imported inside them) were connected by a parent-child relationship in the internal webpack graph. The CommonsChunkPlugin was used to avoid duplicated dependencies across them, but further optimizations were not possible. Since webpack v4, the CommonsChunkPlugin was removed in favor of optimization.splitChunks. DefaultsOut of the box SplitChunksPlugin should work we
Code Splitting | webpack
tipThis guide extends the example provided in Getting Started. Please make sure you are at least familiar with the example provided there and the Output Management chapter. Code splitting is one of the most compelling features of webpack. This feature allows you to split your code into various bundles which can then be loaded on demand or in parallel. It can be used to achieve smaller bundles and
Tree Shaking | webpack
Tree shaking is a term commonly used in the JavaScript context for dead-code elimination. It relies on the static structure of ES2015 module syntax, i.e. import and export. The name and concept have been popularized by the ES2015 module bundler rollup. The webpack 2 release came with built-in support for ES2015 modules (alias harmony modules) as well as unused module export detection. The new webp
Stats Data | webpack
When compiling source code with webpack, users can generate a JSON file containing statistics about modules. These statistics can be used to analyze an application's dependency graph as well as to optimize compilation speed. The file is typically generated with the following CLI command: npx webpack --profile --json=compilation-stats.jsonThe --json=compilation-stats.json flag indicates to webpack
Resolve | webpack
These options change how modules are resolved. Webpack provides reasonable defaults, but it is possible to change the resolving in detail. Have a look at Module Resolution for more explanation of how the resolver works. resolveobject Configure how modules are resolved. For example, when calling import 'lodash' in ES2015, the resolve options can change where webpack goes to look for 'lodash' (see m
Caching | webpack
tipThe examples in this guide stem from getting started, output management and code splitting. So we're using webpack to bundle our modular application which yields a deployable /dist directory. Once the contents of /dist have been deployed to a server, clients (typically browsers) will hit that server to grab the site and its assets. The last step can be time consuming, which is why browsers use
Migrating to Webpack 2 - Jack Franklin
October 21, 2016Migrating to Webpack 2Webpack is on the verge of having its latest major version released, and it's expected to drop very soon. However, the main thing holding the release back is documentation, and the code is mostly written. I recently took the time to update our work project from Webpack 1 to 2, and thought I'd document the steps taken for anyone else who wants to make the move.
hot module replacement with webpack
Note that Hot Module Replacement (HMR) is still an experimental feature. Introduction Hot Module Replacement (HMR) exchanges, adds, or removes modules while an application is running without a page reload. Prerequirements Using Plugins: http://webpack.github.io/docs/using-plugins.html Code Splitting: http://webpack.github.io/docs/code-splitting.html webpack-dev-server: http://webpack.github.io/doc
GitHub - webpack/concord: [WIP] concord modules specification
Reuseable modules that can be used independent of the build system. Allow to use different module types and describe dependencies between them. i. e. code (javascript, coffeescript) data (json, text, yaml) stylesheet (css, less, stylus) image (png, jpg), shader (glsl) font (ttf, woff) template (html, jade) WebWorker (javascript, coffeescript) on-demand loaded Dependencies for module types other th
![GitHub - webpack/concord: [WIP] concord modules specification](https://cdn-ak-scissors.b.st-hatena.com/image/square/7bdacfc280c3c2006f2bab8ce092f297f79209a3/height=288;version=1;width=512/https%3A%2F%2Fopengraph.githubassets.com%2F4eca403a4562aec8f74c0d36cb9c9a04c0e8d2c6337d4caaa2eda24087358722%2Fwebpack%2Fconcord)
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - rstacruz/webpack-tricks: Tips and tricks in using Webpack