vue2项目实战打包优化（webpack）

最新推荐文章于 2024-06-11 11:41:30 发布

@小盆友

最新推荐文章于 2024-06-11 11:41:30 发布

阅读量1.1k

点赞数

分类专栏： Vue 文章标签： webPack4+优化 vue打包配置优化

本文链接：https://blog.csdn.net/ShIcily/article/details/103448880

版权

Vue 专栏收录该内容

19 篇文章 2 订阅

订阅专栏

一、打包后去掉console和警告（uglifyjs-webpack-plugin）

优化方案：修改build文件夹中webpack.prod.conf.js的内容如下：

new UglifyJsPlugin({
  uglifyOptions: {
    compress: {
       unused:true,  //是否去掉未关联的函数和变量
       warnings: true,   //是否去掉告警
       drop_debugger:true,   //自动删除debugger
       drop_console:true,  //自动删除console.log
       pure_funcs:['consoe.log'],
     }
  },
  sourceMap: config.build.productionSourceMap,    //将错误信息为映射到模块
  parallel: true   //多通道并处理
}),

二、让css文件和单文件打包在一起（extract-text-webpack-plugin）

优化方案：在 webpack.prod.conf.js 里面修改内容如下：

//css打包优化；不让css全部打包在一起
new ExtractTextPlugin({
   filename: utils.assetsPath('css/[name].[contenthash].css'),
   allChunks: false,    
}),

三、自动处理css前缀（postcss-loader autoprefixer）

优化方案：在weback配置postcss-loader模块

1、npm i postcss-loader autoprefixer --save-dev

2、在根目录新建一个postcss.config.js文件

module.exports = {
    plugins: [
        require('autoprefixer')
    ]
}

3、在webpack.config.js中处理css的配置文件中添加postcss-loader，如下所示

{
    test:/\.css$/,
    use:extractTextPlugin.extract({
        fallback:"style-loader",
        use:[
            {loader:"css-loader",options:{importLoader:1}},
            "postcss-loader"
        ]
    })
}

四、消除未使用的CSS（PurifyCSS-webpack）

优化方案：

1、安装插件：npm install purifycss-webpack purify-css --save-dev

2、引入glob，因为我们需要同步检查html模板，所以我们需要引入node的glob对象使用。

3、在webpack.config.js/ webpack.prod.conf.js 文件头部引入glob、引入purifycss-webpack

const glob = require('glob');
const PurifyCssWebpack  = require('purifycss-webpack');

4、引入完成后我们需要在webpack.config.js里配置plugins。代码如下

new PurifyCssWebpack({
    paths:glob.sync(path.join(__dirname,'src/*.html'))   //src下所有的html
})

注意：使用这个插件必须配合extract-text-webpack-plugin这个插件

五、代码压缩工具（ParallelUglifyPlugin）

这个插件可以帮助有很多入口点的项目加快构建速度。把对JS文件的串行压缩变为开启多个子进程并行进行uglify

优化方案：

1、安装插件 npm install webpack-parallel-uglify-plugin --save-dev

2、在webpack.config.js/ webpack.prod.conf.js 里配置plugins。

plugins: [
   new ParallelUglifyPlugin({
     workerCount: 4,
     uglifyJS: {
       output: {
         beautify: false, // 不需要格式化
         comments: false // 保留注释
       },
       compress: { // 压缩
         warnings: false, // 删除无用代码时不输出警告
         drop_console: true, // 删除console语句
         collapse_vars: true, // 内嵌定义了但是只有用到一次的变量
         reduce_vars: true // 提取出出现多次但是没有定义成变量去引用的静态值
       }
     }
   });
]

注意：webpack-parallel-uglify-plugin 插件相对 UglifyJsPlugin 打出的包略大（但是不明显）；这里的提速和增加的体积相比，我选择了追求速度

六、DLL（DllPlugin、DllReferencePlugin）

打包dll的时候，Webpack会将所有包含的库做一个索引，写在一个manifest文件中，而引用dll的代码（dll user）在打包的时候，只需要读取这个manifest文件，就可以了

1、在项目build文件夹下新增文件webpack.dll.conf.js，内容如下

var path = require('path');
var webpack = require('webpack');
module.exports = {
  entry: {
      vendor: [ // 这里填写需要的依赖库
           'babel-polyfill',
           'axios',
           'vue/dist/vue.common.js',
           'vue-router',
           'pingpp-js',
           "region-picker",
           'jquery',
           'moment',
           ''
      ]
  },
  output: {
      path: path.resolve(__dirname, '../static/js'),
      filename: '[name].dll.js',  
      library: '[name]_library'
  },
  module: {
      rules: [
           {   test: /\.vue$/,   loader: 'vue-loader'   },
           {   test: /\.js$/,   loader: 'babel-loader',   exclude: /node_modules/   }
      ]
  },
  plugins: [
      new webpack.optimize.ModuleConcatenationPlugin(),
      new webpack.DllPlugin({
           path: path.join(__dirname, '.', '[name]-manifest.json'),
           libraryTarget: 'commonjs2',   name: '[name]_library'  }),
           new webpack.optimize.UglifyJsPlugin({
               compress: {
                       warnings: false 
               }
           })
  ] 
}

2、在webpack.prod.conf.js文件里插件部分添加

plugins: [
   new webpack.DllReferencePlugin({
     context: path.resolve(__dirname, '..'),
     manifest: require("./build/bundle.manifest.json"),
   })
]

3、在项目根目录index.html文件中添加：

<body> 
  <div id="app"></div> 
  <!-- built files will be auto injected -->
  <script src="<%= webpackConfig.output.publicPath %>spa/js/vendor.dll.js"></script>   //添加这句，路径可根据所需修改 
</body>

4、在package.json里打包dll添加命令

"build:dll": "webpack --config build/webpack.dll.conf.js"

5、执行命令

npm run build:dll //打包一次之后依赖库无变动不需要执行
npm run build

七、设置 babel 的 cacheDirectory 为true

优化方案：在webpack.base.conf.js中修改babel-loader

loader: 'babel-loader?cacheDirectory=true',

八、热加载

new webpack.HotModuleReplacementPlugin() //热加载

@小盆友

关注

0
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
vue2项目实战打包优化（webpack）

一、打包后去掉console和警告（uglifyjs-webpack-plugin）优化方案：修改build文件夹中webpack.prod.conf.js的内容如下：new UglifyJsPlugin({ uglifyOptions: { compress: { unused:true, //是否去掉未关联的函数和变量 warnings: t...
复制链接

扫一扫

专栏目录