标签：index lodash 分块 代码 笔记 js import src 打包

举例

没有分块打包之前

src/index.js

import _  from 'lodash'
const arr = [1, 2, 3]
console.log(_.join(arr,'_'))

浏览器只请求1个体积大的js文件

缺点：
文件大，加载时间长；
业务代码修改后，重新访问页面，又要重新请求整个js，不能利用缓存；

分块打包

将公共模块与业务模块分开
src/lodash.js

import _ from 'lodash'
window._ = _;

src/index.js

const arr = [1, 2, 3]
console.log(_.join(arr,'_'))

webpack.common.js

    lodash: './src/lodash.js',
    main: './src/index.js'
  },

浏览器只请求2个体积小的js文件

优点：
打包文件被拆成2个小的js文件，加载快；
业务代码修改后，重新访问页面，只需要重新请求main.js，不用再请求lodash.js，可以利用缓存。

webpack实现代码分割的2种方式

以上纯手工的代码分割不太方便，webpack提供了2种代码分割的方法。

1、同步代码

在webpack.common.js里配置optimization

  optimization: {
    splitChunks: {//代码分割
      chunks: 'all'
    }
  }

打包时，会自动将index.js 分块成main.js（业务代码），和vendors~main.js公共代码）

浏览器请求2个体积小的js文件

1、异步代码(异步import)

异步import文件，需要用babel插件去转换这种语法
安装插件

babel-plugin-dynamic-import-webpack

src/index.js

function getComponent() {
  return import('lodash').then(() => {
    console.log('laall')
  })
}
getComponent();

打包时，会自动将index.js 分块成main.js（业务代码），和0.js(公共代码）

无需任何配置会自动进行代码分割,放到新的文件中。

标签：index,lodash,分块,代码,笔记,js,import,src,打包
来源： https://www.cnblogs.com/superlizhao/p/13618226.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。