webpack 异步加载原理

webpack提供require.ensure来进行异步加载(也称为代码分割),它会把js模块独立导出来生成.js文件,当我们使用到这个模块的时候,webpack会生成script dom元素,让浏览器来加载这个js文件。

使用commonsChunkPlugin

提取库代码:

var webpack = require('webpack');

module.exports = {

    entry:{

        index:  './index.js',    

        vendor:  ['react', 'lodash']

    },

    output: {

        path: 'lib',

        filename: '[name].[chunkhash].js'

    },

    plugins:{

        new webpack.outimize.commonsChunkPlugin({names:[vendor]})

    }

}  

提取公有代码:

var webpack = require('webpack');

module.exports = {

    entry:  {

        page1: './page1.js',

        page2: './page2.js'

    },

    output: {

        filename: '[name].js'

    },

    plugins: {

        new webpack.outimize.commonsChunkPlugin('common.js', ['page1', 'page2'])

    }

}


提取出来的代码,需要先引用,然后再去引用业务代码。

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • GitChat技术杂谈 前言 本文较长,为了节省你的阅读时间,在文前列写作思路如下: 什么是 webpack,它要...
    萧玄辞阅读 14,340评论 7 110
  • webpack 介绍 webpack 是什么 为什么引入新的打包工具 webpack 核心思想 webpack 安...
    yxsGert阅读 11,564评论 2 71
  • 记得2004年的时候,互联网开发就是做网页,那时也没有前端和后端的区分,有时一个网站就是一些纯静态的html,通过...
    阳阳阳一堆阳阅读 8,607评论 0 5
  • 版权声明:本文为博主原创文章,未经博主允许不得转载。 webpack介绍和使用 一、webpack介绍 1、由来 ...
    it筱竹阅读 13,853评论 0 21
  • 一、什么是webpack:webpack是一款模块加载兼打包工具,它可以将js、jsx、coffee、样式sass...
    冰_心阅读 6,030评论 0 3

友情链接更多精彩内容