1.利用webpack优化前端性能

（1）压缩代码。删除多余的代码、注释、简化代码的写法等等方式。可以利用webpack的UglifyJsPlugin和ParallelUglifyPlugin来压缩JS文件， 利用cssnano（css-loader?minimize）来压缩css。使用webpack4，打包项目使用production模式，会自动开启代码压缩。

（2）利用CDN加速。在构建过程中，将引用的静态资源路径修改为CDN上对应的路径。可以利用webpack对于output参数和各loader的publicPath参数来修改资源路径

（3）删除死代码（Tree Shaking）。将代码中永远不会走到的片段删除掉。可以通过在启动webpack时追加参数--optimize-minimize来实现或者使用es6模块开启删除死代码。

（4）优化图片，对于小图可以使用 base64 的方式写入文件中

（5）按照路由拆分代码，实现按需加载，提取公共代码。

（6）给打包出来的文件名添加哈希，实现浏览器缓存文件

2. 如何提高webpack的构建速度？

（1）多入口的情况下，使用commonsChunkPlugin来提取公共代码；

（2）通过externals配置来提取常用库；

（3）使用happypack实现多线程加速编译；

（4）使用webpack-uglify-parallel来提升uglifyPlugin的压缩速度。原理上webpack-uglify-parallel采用多核并行压缩来提升压缩速度；

（5）使用tree-shaking和scope hoisting来剔除多余代码。

3. 怎么配置单页应用？怎么配置多页应用？

单页应用可以理解为webpack的标准模式，直接在entry中指定单页应用的入口即可。

多页应用的话，可以使用webpack的 AutoWebPlugin来完成简单自动化的构建，但是前提是项目的目录结构必须遵守他预设的规范。

4. npm打包时需要注意哪些？如何利用webpack来更好的构建？

NPM模块需要注意以下问题：

（1）要支持CommonJS模块化规范，所以要求打包后的最后结果也遵守该规则

（2）Npm模块使用者的环境是不确定的，很有可能并不支持ES6，所以打包的最后结果应该是采用ES5编写的。并且如果ES5是经过转换的，请最好连同SourceMap一同上传。

（3）Npm包大小应该是尽量小（有些仓库会限制包大小）

（4）发布的模块不能将依赖的模块也一同打包，应该让用户选择性的去自行安装。这样可以避免模块应用者再次打包时出现底层模块被重复打包的情况。

（5）UI组件类的模块应该将依赖的其它资源文件，例如.css文件也需要包含在发布的模块里。

基于以上需要注意的问题，我们可以对于webpack配置做以下扩展和优化：

（1）CommonJS模块化规范的解决方案： 设置output.libraryTarget='commonjs2'使输出的代码符合CommonJS2 模块化规范，以供给其它模块导入使用；

（2）输出ES5代码的解决方案：使用babel-loader把 ES6 代码转换成 ES5 的代码。再通过开启devtool: 'source-map'输出SourceMap以发布调试。

（3）Npm包大小尽量小的解决方案：Babel 在把 ES6 代码转换成 ES5 代码时会注入一些辅助函数，最终导致每个输出的文件中都包含这段辅助函数的代码，造成了代码的冗余。解决方法是修改.babelrc文件，为其加入transform-runtime插件

（4）不能将依赖模块打包到NPM模块中的解决方案：使用externals配置项来告诉webpack哪些模块不需要打包。

（5）对于依赖的资源文件打包的解决方案：通过css-loader和extract-text-webpack-plugin来实现

5. 如何在vue项目中实现按需加载？

Element出品的babel-plugin-component和AntDesign出品的babel-plugin-import 安装以上插件后,

在.babelrc配置中或babel-loader的参数中进行设置，即可实现组件按需加载了。