vue打包优化

最新推荐文章于 2024-03-12 11:39:34 发布

RAY_CHEN.

最新推荐文章于 2024-03-12 11:39:34 发布

阅读量1.1k

点赞数

文章标签： webpack

本文链接：https://blog.csdn.net/weixin_44707050/article/details/124121975

版权

1.下载webpack打包分析插件

npm install webpack-bundle-analyzer --save-dev

2.package.json中，scripts->build 添加--report

 "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build --report"
  },

3.创建vue.config.js文件


const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
   
    configureWebpack: {
       
        plugins: [
            new BundleAnalyzerPlugin()
        ]
    }

}

运行npm run build后，可以查看打包文件的大小

4.如果插件体积过大，configureWebpack中添加externals属性，用cdn替换；打包不包含externals中的内容


const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
    publicPath:'./',
    configureWebpack: {
        externals:{
            'vue':'Vue',
            'element-ui':'ELEMENT'
        },
        plugins: [
            new BundleAnalyzerPlugin()
        ]
    }

}

说明：externals中是key:value的形式；

key是文件引入的名称，value可以从cdn中的代码找；（从cdn找到链接，浏览器打开）

5.把externals中的插件用cdn替换；搜索bootcdn找到对应的链接

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
    <link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.6/theme-chalk/index.min.css" rel="stylesheet">
  </head>
  <body>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.runtime.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.6/index.min.js"></script>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  
  </body>
  

</html>

P.S. script要写在body中，否则会报错：Vue is not defined,

运行npm run build 打开/dist/index.html，运行，有静态资源找不到的错误，

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
    publicPath:'./',
    configureWebpack: {
        externals:{
            'vue':'Vue',
            'element-ui':'ELEMENT'
        },
        plugins: [
            new BundleAnalyzerPlugin()
        ]
    }

}

在 vue.config.js中添加publicPath属性即可；

RAY_CHEN.

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue打包优化

1.下载webpack打包分析插件npm install webpack-bundle-analyzer --save-dev2.package.json中，scripts->build 添加--report "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build --report" },3.创建vue.config.js文件const BundleAn
复制链接

扫一扫