记录面试遇到的问题

1. webpack 如何进行性能优化

打包体积性能优化

1. 压缩代码
   • 1. 使用uglyJsPlugin 压缩js代码，
   • 2. 使用 OptimizeCssAssetsPlugin压缩css代码，
   • 3. 使用imageminwebpackplugin优化图片，
   • 4. 通过TreeShaking去掉无用代码
2. 使用cdn 将不常变化的库或文件例如vue.js，分离出去，使用cdn引入，也可以减小包体积
3. 按需加载，把代码中共享的代码分割出来，降低主包的体积
4. 配置多个入口和出口文件，将单页应用改为多页应用，也可以降低对应的主包的体积
5. 使用动态导入，懒加载
6. 去掉source-map

构建性能优化

1. 使用HappyPack开启多进程Loader转换,通过webpack的多线程打包工具，将任务分给多个子线程共同处理

2. 优化路径，提高webpack搜索文件的速度

   • 1. 使用resolve，（不要使用绝对路径），，
   • 2. 使用alias别名
   • 3. 配置loader缩小搜索范围
   • 4. 合理配置resolve.extensions，减少文件查找

3. 使用cache-loader，可以缓存构建的模块，提高重复构建的速度

4. 模块查找优化，通过配置webpack模块查找方式，减少模块解析时间

2. 谈谈包管理机制

1. package.json package.json是进行依赖管理的一个配置文件，通过如下两个配置管理依赖
   • dependencies：指定项目运行所依赖的模块
   • devdependencies:一些开发环境所依赖的模块，只会在开发环境用到，生产环境不会下载 这两个配置内部都是通过 name:version来进行管理的， version的写法有多种:
     • '1.0.0': 定死版本
     • '^1.0.0':在主版本不变的情况下，可以更新次要版本和最小版本 比如可以更新为 '1.1.1'
     • '~1.0.0':在主版本和次要版本不变的情况下，可以更新最小版本 比如可以更新为 '1.0.1' package-lock.json 在下在了包之后会新增一个 '-lock'文件，锁住版本号，只要存在lock文件，就会优先按lock文件里面锁死的版本号进行下载。 同样的还有 yarn-lock pnpm-lock 文件
2. npm npm最开始是将包存在node_modules里面，并将所依赖的包存在包自己的node_modules里面，这样会导致重复安装产生大量冗余，所以后面将依赖扁平化，相同的包放在最顶层node_modules里面，只要不一致的包放在对应的包的node_modules里面。npm也新增了缓存包的操作
3. yarn yarn是直接将依赖扁平化了，还加了缓存，npm后来的扁平化和缓存就是类似yarn的操作，扁平话会导致幽灵依赖
4. pnpm pnpm将下载的包通过硬编码存到了硬盘的某个位置，在node_modules里的只是一个链接,这样node_modules就可以包装依赖的嵌套结构了，也更符合理解包的依赖关系