vite图片处理

最新推荐文章于 2024-10-24 09:39:22 发布

初晨未凉

最新推荐文章于 2024-10-24 09:39:22 发布

阅读量752

点赞数

CC 4.0 BY-SA版权

分类专栏： vite优化文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/weixin_45638909/article/details/131512780

vite优化专栏收录该内容

1 篇文章

订阅专栏

文章讲述了作者在从webpack迁移到vite时遇到的问题，尝试使用require插件导致打包速度变慢。作者意识到vite和webpack的编译方式不同，于是改用vite内置的import.meta.globEager方法，创建了一个插件来转换require语法，并提供了一个全局方法$getImgSrc来动态获取图片资源。这种方法提高了构建效率，遵循了使用框架原生功能的原则。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

踩坑点：之前在webpack中引用方式是require，后面我就一直想用require插件，然后就在网上查到了下面的方法，就是这个导致打包速度很久，后来我想了想，webpack和vite的编译方式都不一样啊，嗯，这不强扭的瓜不甜。后来我就用了vite内部的import.meta.globEager，写了一个getImgSrc方法，通过inject引入。

主要问题点：解决打包速度，尽量用框架自带的方法，不要想着以前的。就像人总会变。

写一个插件

export default function requirePlugin() {

return {

// 插件名称

name: "vite-plugin-vue-requireToUrlPlugin",

// 默认值post：在 Vite 核心插件之后调用该插件，pre：在 Vite 核心插件之前调用该插件

// enforce: "post",

// 代码转译，这个函数的功能类似于 "webpack" 的 "loader"

transform(code, id, opt) {

const vueRE = /\.vue$/;

const require = /require/g;

// 过滤掉非目标文件

if (!vueRE.test(id) || !require.test(code)) return code;

// 匹配 require() 内的内容

const requireRegex = /require$(.*?)$/g;

// 将 require() 内的内容替换为 new URL 的写法

const finalCode = code.replace(requireRegex, "new URL($1,import.meta.url).href");

// 将转换后的代码返回

return finalCode;

},

};

}

引用

import requireToUrlPlugin from './plugins/requireToUrlPlugin';
export default defineConfig({
base: process.env.NODE_ENV === 'production' ? './' : '/',
plugins: [
vue(),
],
css: {
preprocessorOptions: {
// 全局样式引入
scss: {
additionalData: '@import "./src/theme/element.scss";@import "./src/theme/main.scss";',
javascriptEnabled: true,
}
}
},
resolve: {
alias: {
"@": path.join(__dirname, "./src"),
},
},
build:{
minify: 'terser',
productionSouceMap: false,
rollupOptions: {
output: {
chunkFileNames: 'static/js/[name]-[hash].js',
entryFileNames: 'static/js/[name]-[hash].js',
assetFileNames: 'static/[ext]/[name]-[hash].[ext]',
manualChunks(id) {
if (id.includes('node_modules')) {
return id.toString().split('node_modules/')[1].split('/')[0].toString();
}
}
}
},
terserOptions: {
compress: {
drop_console: true,
drop_debugger: true,
},
}
}

})

1.在plugins/elementPlus.js中

app.provide('$getImgSrc',(name)=>{

if (typeof name === 'undefined') return 'error.png'

const modules = import.meta.globEager('/src/**/*.{png,svg,jpg,jpeg}')

if (modules[name]) return modules[name].default

})

2.在项目中引用

</template>
<script>
import { reactive, toRefs, defineComponent, onMounted, inject } from 'vue';
export default defineComponent({
   components: {},
   setup() {
       const getImgSrc = inject('$getImgSrc')
       const state = reactive({
           app:[
               {
                   icon: getImgSrc('/src/assets/homeIcon/01.png'),
                   txt: '目标职责'
               },
               {
                   icon: getImgSrc('/src/assets/homeIcon/02.png'),
                   txt: '制度化管理'
               },
               {
                   icon: getImgSrc('/src/assets/homeIcon/03.png'),
                   txt: '教育培训'
               },
               {
                   icon: getImgSrc('/src/assets/homeIcon/04.png'),
                   txt: '事故管理'
               },
               {
                   icon: getImgSrc('/src/assets/homeIcon/05.png'),
                   txt: '应急管理'
               },
               {
                   icon: getImgSrc('/src/assets/homeIcon/06.png'),
                   txt: '数据中心'
               },
               {
                   icon: getImgSrc('/src/assets/homeIcon/07.png'),
                   txt: '试题库'
               },
           ],
       });
       onMounted(()=>{});
       return {
           ...toRefs(state),
           getImgSrc,
       };
   },
   methods:{
       clickExamine(v){
           this.examineRef.open(v);
       }
   }
});
</script>
<style scoped lang="scss">
</style>