webpack学习第十二步——代码分割

2020-02-14 本文已影响0人 Love小六六

打包命令

为了development模式下也能很好观察打包的文件，我们在package.json中增加一个打包命令，不使用devServer

"scripts": {
    "dev": "webpack --config ./config/webpack.dev.js",
    "start": "webpack-dev-server --config ./config/webpack.dev.js",
    "build": "webpack --config ./config/webpack.prod.js"
}

index.js引入lodash

安装lodash

npm install lodash -D

index.js使用lodash

import _ from  'lodash'

console.log(_.join(['a','b','c'],'***'))

打包后生成的文件很大

打包文件会很大，加载时间会很长，改了业务代码，重新访问我们的页面，又要重新加载这么大的文件内容

写代码时的代码分割

新建一个lodash.js文件

// 导入import 文件，并且将lodash挂载到window对象上
import _ from 'lodash'
window._ = _

修改index.js

// 不需要import lodash，可直接使用_
console.log(_.join(['a','b','c'],'***'))

修改webpack.common.js

// 打包的入口文件改为两个，单独打包lodash
entry: {
    lodash: './src/lodash.js',
    main: './src/index.js',
},

main.js被拆成loadash.js 和 mian.js(业务代码)，浏览器并行加载两个文件，当业务代码发生变化，用户不需加载lodash，只需加载main.js

利用webpack实现代码分割

不需要开发者自己再写个lodash.js将lodash挂载到window，而是自动把类库拆分成一个文件
修改index.js

// 导入lodash
import _ from 'lodash'
console.log(_.join(['a','b','c'],'***'))

修改webpack.common.js

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin')

module.exports = {
    entry: {
         // 打包index.js文件
        main: './src/index.js',
    },
    module: {
        rules: [{
            test: /\.(jpg|png|gif)$/,
            use: {
                loader: "url-loader",
                options: {
                    name: '[name]_[hash].[ext]',
                    outputPath: 'images/',
                    limit: 2048
                }
            }
        },{
            test: /\.css$/,
            use: [
                'style-loader',
                'css-loader',
                'postcss-loader'
            ]
        },{
            test: /\.js$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
        }]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: 'src/index.html'
        }),
        new CleanWebpackPlugin({
            root: path.resolve(__dirname, '../')
        }),
    ],
    output: {
        path: path.resolve(__dirname, '../build'),
        filename: '[name].js'
    },
    optimization: {
    // 设置splitChunks
        splitChunks: {
            chunks: "all"
        }
    }
}

打包后index.js会自动变为两个文件，实现了自动的代码分割

异步import的代码分割

异步import需要引入官方的babel

npm install @babel/plugin-syntax-dynamic-import -D

修改babelrc

{
  "presets": [
    [
      "@babel/preset-env",{
        "targets": {
          "chrome": "67"
        },
        "useBuiltIns": "usage"
      }
    ],
    "@babel/preset-react"
  ],
  // 使用异步 import 插件
  "plugins": ["@babel/plugin-syntax-dynamic-import"]
}

修改index.js为异步import方式

function getComponent() {
    return import('lodash').then(({ default: _ }) => {
        var element = document.createElement('div')
        element.innerHTML =_.join(['a','b','c'],'***')
        return element
    })
}
getComponent().then(element => document.body.appendChild(element))

打包index.js会拆分成两个文件

打开index.html

可以指定生成的chunk文件的文件名

function getComponent() {
// 通过这种注解生成chunkname，将生成的chunk文件指定文件名为lodash
    return import(/* webpackChunkName:'lodash' */'lodash').then(( _ ) => {
        var element = document.createElement('div')
        element.innerHTML =_.join(['a','b','c'],'***')
        return element
    })
}
getComponent().then(element => document.body.appendChild(element))

splitChunks配置项

修改webpack.common.js

optimization: {
    splitChunks: {
        chunks: "all",
        cacheGroups: {
            vendors: false,
            default: false
        }
    }
}

打包生成的文件不再用vendors前缀

splitChunks默认配置项

optimization: {
    // splitChunks: {},
    // 等价于
    splitChunks: {
        chunks: 'async',
        minSize: 30000,
        maxSize: 0,
        minChunks: 1,
        maxAsyncRequests: 5,
        maxInitialRequests: 3,
        automaticNameDelimiter: '~',
        name: true,
        cacheGroups: {
            vendors: {
                test: /[\\/]node_modules[\\/]/,
                priority: -10
            },
            default: {
                minChunks: 2,
                priority: -20,
                reuseExistingChunk: true
            }
        }
    }
}

chunks配置

默认为async

// 代码分割时只对异步代码生效，同步 import lodash 不进行代码分割
chunks: 'async'

避免受其他因素干扰我们将cacheGroups都先置为false,minSize 和 maxSize 都设置为0

splitChunks: {
    chunks: 'async',
    minSize: 0,
    maxSize: 0,
    minChunks: 1,
    maxAsyncRequests: 5,
    maxInitialRequests: 3,
    automaticNameDelimiter: '~',
    name: true,
    cacheGroups: {
        // vendors: {
        //     test: /[\\/]node_modules[\\/]/,
        //     priority: -10,
        //     filename: "vendors.js"
        // },
        // default: {
        //     // minChunks: 2,
        //     priority: -20,
        //     reuseExistingChunk: true,
        //     filename: "common.js"
        // }
        vendors: false,
        default: false
    }
}

修改index.js为同步import方式

import _ from 'lodash'

var element = document.createElement('div')
element.innerHTML =_.join(['a','b','c'],'***')
document.body.appendChild(element)

打包不会进行代码分割

修改index.js为异步import方式

function getComponent() {
    return import(/* webpackChunkName:'lodash' */'lodash').then(( _ ) => {
        var element = document.createElement('div')
        element.innerHTML =_.join(['a','b','c'],'***')
        return element
    })
}
getComponent().then(element => document.body.appendChild(element))

打包时会进行代码分割

对同步异步都进行打包 (initial为对同步代码做分割)

chunks: 'all'

需要配合cacheGroups选项,否则同步import 仍旧不会进行代码分割

cacheGroups: {
    vendors: {
    // node_modules里面的文件分割打到单独文件里
        test: /[\\/]node_modules[\\/]/,
        priority: -10
    },
    default: false
}

打包后代码被分割，vendors~main表示打包了vendors文件，入口是main

可以修改vendors文件的文件名

vendors: {
    test: /[\\/]node_modules[\\/]/,
    priority: -10,
    // 文件名为vendors.js(异步import不可用)
    filename: "vendors.js"
},

打包后文件名为vendors.js

非node_module库的import

新建a.js

export default {
    num : 1
}

index.js导入a.js

import a from './a'
console.log(a.num)

符合代码分割后会走到cacheGroups，因为不在node_modules里，所以不会走vendros，而是走到default配置，因此我们需要修改cacheGroups

cacheGroups: {
    vendors: {
        test: /[\\/]node_modules[\\/]/,
        priority: -10,
        filename: "vendors.js"
    },
    default: {
        priority: -20,
        reuseExistingChunk: true,
    }
}

打包后a.js会被打包到default~main.js中

default设置filename

default: {
    priority: -20,
    reuseExistingChunk: true,
    filename: "common.js"
}

minSize 配置

默认引入的模块大于30000个字节才做split

minSize: 30000

上例中引入a.js，设置minSize后打包，就不会进行代码分割

将minSize改为minSize: 1后打包会进行代码分割，生成common.js文件

maxSize 配置

配置maxSize,限定最大值，超过就会进行二次拆分

// 引入的模块大于1个字节才做split
minSize: 1,
// 引入的a.js限定了最大值，超过就会对文件进行二次拆分
maxSize: 2,

打包后commin.js被二次拆分

一般不使用

minChunks

minChunks表示一个代码至少被引用过多少次才进行代码分割
修改minChunks的值

minChunks: 2

index.js引用lodash
打包的代码不会进行代码分割

新建other.js，在改文件中也引用lodash
webpack.common.js中对other.js也进行打包操作

entry: {
    main: './src/index.js',
    other: './src/other.js'
}

此时lodash会被分割出来，vendors_mainother表示main和other都引用了该文件

多个文件

main.js引入了lodash,other.js引入了lodash和jquery, a.js引入了jquery,这个时候如果cacheGroups还设定fileName会发生冲突

将filename改为name,lodash和jquery都打到了vendors.js文件中

vendors: {
    test: /[\\/]node_modules[\\/]/,
    priority: -10,
    name: "vendors"
}

注释掉name,会分割为vendors~a~other.js和vendors~main~other.js

vendors: {
    test: /[\\/]node_modules[\\/]/,
    priority: -10,
    //name: "vendors"
}

其他配置

其他配置

// 同时加载的模块数最多5个，超过5个不做代码分割
maxAsyncRequests: 5,
// 入口文件引入的文件最多三个代码分割
maxInitialRequests: 3,
// 生成文件名称连接符
automaticNameDelimiter: '~',
// cacheGroups 里 filename 有效
name: true,

cacheGroups的配置

default: {
    // minChunks: 2,
    // 优先级低于-10，所以node_modules里面用vendors
    priority: -20,
    // 一个模块已经被引用过，就直接复用，不用再打包
    reuseExistingChunk: true,
    filename: "common.js"
},

webpack学习第十二步——代码分割

打包命令

index.js引入lodash

写代码时的代码分割

利用webpack实现代码分割

异步import的代码分割

splitChunks配置项

splitChunks默认配置项

chunks配置

minSize 配置

maxSize 配置

minChunks

多个文件

其他配置

猜你喜欢

热点阅读