Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”

The separation of CSS

  • Separate the CSS and package it into a separate file for caching and other operations
  • Install – extract – text – webpack – the plugin
  • Separate THE CSS from the production environment. The development environment can be mixed with JS, but the production environment needs to package CSS separately
  • One more can be packed in the production catalogstyles.c6747ed3.cssIn this file, the style style in the. Vue file is not packaged, because Vue handles it by itself, and loads this style when the pendant is displayed, which is convenient to do asynchronous components and save traffic, etc. If necessary, this part of the code can also be packaged separately
// Development environment configuration
config.module.rules.push({
    test: /\.styl$/,
    use: [
        'style-loader'.'css-loader',
        {
            loader: "postcss-loader".options: {
                sourceMap: true // Since the stylus-loader generates a map file, the postCSs-loader does not need to be generated and can be used directly}},'stylus-loader']})Copy the code
// Production environment
config.module.rules.push({
    test: /\.styl$/,
    use: ExtractPlugin.extract({
        fallback:'style-loader'.use: ['css-loader',
            {
                loader: "postcss-loader".options: {
                    sourceMap: true}},'stylus-loader'
        ]
    })
})
config.plugins.push(
    new ExtractPlugin('styles.[contentHash:8].css'))Copy the code

The output optimization

  • In the development environment, you can use a hash directly, but in the production environment you need to use Chunkhash
  • One more can be packed in the production catalogmain.f8a5f51d.jsThe file
// Development environment
output: {
    filename: 'bundle.[hash:8].js'.path: path.join(__dirname, 'dist')}Copy the code
// Production environment
output: {
    filename: 'bundle.[chunkhash:8].js'.path: path.join(__dirname, 'dist')}Copy the code
  • The hash and chunkhash
    • If filename in output uses hash, the hash of the packaged file is the same. Hash refers to the hash of the entire application. The hash value of the packaged application changes each time
    • If chunkhash is used, the hash value of the packaged file is different. The chunkhash represents the hash of each file.
    • Chunkhash must be used when using different entries or packaging class library files, otherwise it is meaningless to use hash every time and the class library changes due to business code changes

Class library file processing

  • Because the class library file is very stable, the version will not be upgraded in the development process, and the business code is very flexible and needs to be changed frequently, so it is hoped that the class library file and the business logic file can be packaged differently, so that the browser can cache the class library file well
// Production environment
// Multiple vendor can be added. If vuex.vue-router is used, it can be added directly
config.entry = {
    app:path.join(__dirname,'src/index.js'),
    vendor: ['vue'.'element-ui']
}

config.plugins.push(
    new webpack.optimize.CommonsChunkPlugin({
        name:'vendor' // Must be consistent with the name in the entry. Otherwise we can't identify them}))Copy the code

Pack the Webpack file separately

  • Package the webpack code generated in app.js into a separate file

  • Since webpack will add an ID to the project every time a module is inserted, and its location is random, this will cause the ID of each module after the new module is inserted to change, which will cause the packaged content and hash to change, which is not good for browser cache

    // Vendor must be placed before runtime
config.plugins.push(
    new webpack.optimize.CommonsChunkPlugin({
        name:'vendor' // Must be consistent with the name in the entry. Otherwise we can't identify them
    }),
    new webpack.optimize.CommonsChunkPlugin({
        name:'runtime'// This name must not be the same as the one in entry}))Copy the code