webpack學習---優化-- js文件拆分(將合並的一個js分割成多個,並行加載)

 js文件拆分,將打包后多個js合並的一個js分割成多個,並行加載

        1. 多入口模式和splitChunks配合,可以將js拆分成多個,並且可以將node_modules中代碼單獨打包,公共的文件打包成單獨一個chunk

        2. 單入口模式和splitChunks配合,可以將node_modules中代碼單獨打包

        3, 單入口模式和splitChunks加上在js中用import動態導入語法,能將某個文件單獨打包,並且可以將node_modules中代碼單獨打包

                const { resolve } = require('path');
                const HtmlWebpackPlugin = require('html-webpack-plugin');

                module.exports = {
                // 單入口
                // entry: './src/js/index.js',
               
                //多入口
                entry: {
                    index: './src/js/index.js',
                    test: './src/js/test.js'
                },
                output: {
                    // [name]：取文件名
                    filename: 'js/[name].[contenthash:10].js',
                    path: resolve(__dirname, 'build')
                },
                plugins: [
                    new HtmlWebpackPlugin({
                    template: './src/index.html',
                    minify: {
                        collapseWhitespace: true,
                        removeComments: true
                    }
                    })
                ],
                /*
                    1. 可以將node_modules中代碼單獨打包一個chunk最終輸出
                    2. 自動分析多入口chunk中，有沒有公共的文件。如果有會打包成單獨一個chunk
                */
                optimization: {
                    splitChunks: {
                    chunks: 'all'
                    }
                },
                mode: 'production'
                };

 

        index.js中分離js方式

                /*
                通過js代碼，讓某個文件被單獨打包成一個chunk
                import動態導入語法：能將某個文件單獨打包

                webpackChunkName: 'test'  在js中給分離出去的js命名
                */
                import(/* webpackChunkName: 'test' */'./test')
                .then(({ mul, count }) => {
                    // 文件加載成功~
                    // eslint-disable-next-line
                    console.log(mul(2, 5));
                })
                .catch(() => {
                    // eslint-disable-next-line
                    console.log('文件加載失敗~');
                });