Webpack related

1. Optimization of packaging volume

  • Extract third-party libraries or introduce them by referring to external files
  • Code compression plug-inUglifyJsPlugin
  • Gzip compression is enabled on the server
  • Load resource files on demandrequire.ensure
  • To optimize thedevtoolIn thesource-map
  • strippingcssFile, packaged separately
  • The removal of unnecessary plug-ins is usually the result of the same set of configuration files for the development and production environments

2 Packaging efficiency

  • The development environment is built incrementally with hot updates enabled
  • The development environment does not do meaningless work such as extractioncssCompute file hashes, etc
  • configurationdevtool
  • Choose the right oneloader
  • individualloaderopencache 如babel-loader
  • Third-party libraries are imported
  • Extract common code
  • Optimizing the search path at build time indicates whether a directory needs to be built or not
  • Modularity introduces the required parts

3 Loader

Writing a loader

Loader is a node module that outputs a function. This function is called when a resource needs to be converted by the 'loader'. Also, this function can access the Loader API through the 'this' context provided to it. `reverse-txt-loaderCopy the code
/ / define
module.exports = function(src) {
  // SRC is the content of the original file (abcde)
  var result = src.split(' ').reverse().join(' ');
  // Return JavaScript source code, must be String or Buffer
  return `module.exports = '${result}'`;
}
/ / use
{
	test: /\.txt$/,
	use: [
		{
			'./path/reverse-txt-loader'}},Copy the code

4. Talk about some plugin of Webpack, how to use Webpack to optimize the project

Build optimization

  • Reduced compilation volumeContextReplacementPugin,IgnorePlugin,babel-plugin-import,babel-plugin-transform-runtime
  • Parallel compilationhappypack,thread-loader,uglifyjsWebpackPluginOpen the parallel
  • The cachecache-loader,hard-source-webpack-plugin,uglifyjsWebpackPluginEnable caching,babel-loaderOpen the cache
  • precompileddllWebpackPlugin && DllReferencePlugin,auto-dll-webapck-plugin

Performance optimization

  • Reduced compilation volumeTree-shaking,Scope Hositing
  • hashThe cachewebpack-md5-plugin
  • unpackingsplitChunksPlugin,import(),require.ensure