前端基础之《React（8）—webpack简介-其他配置》

csj502026-05-12 9:14

接上篇......

十六、配置路径别名

1、代码

配置路径别名config.js添加：

javascript 复制代码

    resolve: {
        alias: {
            '@': path.resolve(__dirname, '../', 'src')
        }
    }

十七、文件压缩

1、代码

本地开发时不压缩serve.js添加：

javascript 复制代码

    optimization: {
        minimize: false
    },

打包部署时压缩build.js添加：

javascript 复制代码

    optimization: {
        minimize: true
    },

十八、代码分割技术

1、如果webpack在运行过程中，遇到这样的代码：

比如有个模块dog.js

export default function() {

console.log('---dog')

}

平时加载代码用：

import dog form '@utils/dog.js'

这是同步加载，webpack打包时就会把dog.js代码和app合并在一起，如果dog模块代码非常大，生成的文件就很大

所以要做代码分割（动态导入）：

const dog = () => import('@/utils/dog.js')

dog现在是function，现在没有调用，不会引入app.js，会新开一个js文件

调用时：

dog()

动态加载dog.js文件编译后的文件

动态导入技术：

当webpack打包时，只要遇到()=>import()这样的语法，会切割生成一个新的JS文件（chunk）

PS；vue路由懒加载就用到的这个技术

十九、Tree Sharking

1、摇树优化

入口文件main.js，可以理解是树根，main.js和后面所有模块产生树结构的关系

比如在文件中有方法在项目中任何地方都没用到，可以开启tree-sharking，把这个死代码摇掉