Extract CSS into a separate file

  • why

If CSS files are not extracted, they will be packed into JS files, which will not only increase the size of JS files and prolong the download time of JS files, but also increase the delay of parsing JS files after DOM tree generation, affecting the rendering speed and poor user experience

  • benefits

By extracting the CSS file separately, you can first introduce the single CSS file at the top of the page. The browser parses the CSS file to generate CSSOM and DomTree to generate a rendering tree to render the page as quickly as possible.

Exreact-plugin-d: module.exports ={exports. Module: {rules: [{$/ test: / \. CSS, use: [/ / style - loader / / create style label to the head but in the separation of CSS is not applicable when MiniCssExtractPlugin. Loader, }]} plugins:{new MiniCssExtractPlugin({// Rename the output CSS template:'./src/built.css' }) } }Copy the code

Common style reuse

const MiniCssRxtractPlugin = require('mini-css-extract-plugin') const commonCssLoader = { MiniCssExtractPlugin.loader, Browsersslist loader:' postCSs-loader ', options:{ident:'postcss', {ident:'postcss', plugins:() => { require('postcss-preset-env')() } } } } module.exports = { ... Module :{rules:[{test:/\.css$/, use:[...commonCssLoader]}, // The development of more efficient {test: / \. Less $/, use: [... commonCssLoader, 'sass - loader]}}, plugins:[ new MiniCssExtractPlugin({ filename:'css/built.css' }) ] }Copy the code

CSS compression

const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')

module.exports ={
   ...
   plugins:[
      new OptimizeCssAssetsWebpackPlugin
   ]
}
Copy the code

CSS Compatibility

  • The reason:

If the system needs to be compatible with multiple browsers, vendor prefixes such as -webkit- will be added to CSS files. Since webPack can’t recognize these prefixes, we introduced postCSS-Loader, which automatically adds vendor prefix information for us.

NPM install postCSs-loader postCSs-env -d module.exports = {preset... module:{ rules:[ { test:/\.css$/, use:[ MiniCssExtractPlugin.loader, 'css-loader', { loader:'postcss-loader', Options :{ident:'postcss', plugins:() =>[// PostCSS plugin to help PostCSS find browserslist configuration in package.json, Load specified CSS via configuration compatible with require(' postCSS-preset -env')()]}}]}]}} package.json configuration {"browserslist":{// development environment, Nodejs environment variable "development":["last 1 Chrome version",// latest Chrome version], // Production environment (default) "production":[">0.2%", "not dead", "not op_mimi all" ] } }Copy the code

Js syntax check esLint

Eslint-config-airbnb-base eslint-plugin-import eslint-d config: module.exports = {exports. Module :{rules:[/* js syntax eslint */ {test:/\.js$/, exclude:/node_modules/, Enforce :'pre',// implement loader:'eslint-loader', options:{// automatically fix eslint error fix:true}}, /* js compatibility handling: Babel-loader @babel/ core@babel-preset -env 1: @babel/polyfill 3: Load on demand, preset-env, can only handle part of compatibility problems 2: All compatibility processing, need to download @babel/ Polyfill 3: Load on demand, -- "core-js */ {test:/\.js$/, exclude:/node_modules/, loader:'babel-loader', options:{// default: Presets :['@babel/preset-env', {useBuiltIns:'usage', corejs:{version:3}, presets:['@babel/preset-env', {useBuiltIns:'usage', corejs:{version:3}, Targets :{chrome:'60'}}]}}} package.json eslintConfig :{"extends":"airbnb "} targets:{Chrome :'60'}}]}} eslintConfig :{"extends":" Airbnb "}Copy the code

Exclude other files

module.exports ={
   ...
   rules:[
     {
       exclude:/\.(js|css|less|html|jpg|png|gif)/,
       loader:'file-loader',
       options:{
         outputPath:'media'
       }
     }
   ]
}
Copy the code