前端工具webpack-打包优化-第1篇

开门见山

在本篇文章中主要是介绍webpack如何进行打包优化,在webpack中默认将所有的文件都打包到bundle.js文件中

但是在项目运行的时候并不是所有的模块都需要使用的，如果一次性加载全部的文件，容易浪费带宽和流量

所以呢在这里我们要把模块打包成不同js文件，实现更好的体验，主要是代码分割，

有两种实现方式，一种是多入口打包，另外一种是动态导入

具体如何实现，请看下面的演示

多入口打包

一般适用于多页应用打包，一个页面对应一个打包入口，具体看代码实现

const { CleanWebpackPlugin } = require('clean-webpack-plugin')

const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    mode: 'none',
    entry: {
        index: "./src/index.js", //指定入口文件
        album: "./src/album.js" //指定入口文件
    },
    output: {
        filename: '[name].bundle.js' //两个入口文件也就意味着有两个输出文件,
            //这里我们用[name]作为占位符使用
            //打包的时候自动替换为入口的文件名称也就是index和album
    },
    module: {
        rules: [{
            test: /\.css$/,
            use: [
                'style-loader',
                'css-loader'
            ]
        }]
    },
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            title: 'Multi Entry',
            template: './src/index.html',
            filename: 'index.html',
            chunks: ['index'] //引入指定的输出的js文件
        }),
        new HtmlWebpackPlugin({
            title: 'Multi Entry',
            template: './src/album.html',
            filename: 'album.html',
            chunks: ['album'] //引入指定的输出的js文件
        })
    ]
}

多入口打包提供公共模块

多入口打包提供公共模块其实非常简单,只需要在webpack.config.js开启一个简单的配置
  optimization: {
        splitChunks: {
            chunks: "all"
        }
    },
这样就实现了提取公共模块，很简单

动态导入

按需加载一般指的是数据中的按需加载，在webpack中具体指的是，需要用到某个模块时，在加载这个模块

可以节省带宽和流量,webpack支持动态导入的方式实现按需加载，而且动态导入的模块自动提取到单独的bundle中

从而实现分包,这种方式更为灵活，我们可以通过代码的逻辑判断需不需要引用模块，

动态导入代码演示

const render = () => {
    const hash = window.location.hash || '#posts'

    const mainElement = document.querySelector('.main')

    mainElement.innerHTML = ''

    if (hash === '#posts') {
		//逻辑判断,是否为posts,如果是posts就引入posts,支持链式调用,通过解构拿到数据
        /* webpackChunkName: 'components' */ 这部分是魔法注释,主要是改写输出文件的文件名
        import ( /* webpackChunkName: 'components' */ './posts/posts').then(({ default: posts }) => {
            mainElement.appendChild(posts())
        })
    } else if (hash === '#album') {
  		//如果webpackChunkName的名字是相同的,那么这两个文件会合并到一起
        import ( /* webpackChunkName: 'components' */ './album/album').then(({ default: album }) => {
            mainElement.appendChild(album())
        })
    }
}

render()

window.addEventListener('hashchange', render)

莫等闲，白了少年头，空悲切,谢谢观看,如有不足，敬请指教